title: Vertical padding of responsive images
body: <p>This <strong>CSS:</strong></p>
  
  <pre><code>.outer-img-wrap {
      border: 2px solid gray;
      margin: 1vw auto;
      max-width: 192px;
      text-align: center;
      overflow: hidden;
  }
  .outer-img-wrap img {
      width: auto !important;
      height: auto !important;
      max-width: 100%;
      vertical-align: middle;
  }
  .inner-img-wrap {
      background: #000;
      border: thin solid #ff9900;
      margin: 2px;
  }
  </code></pre>
  
  <p>applied to this <strong>HTML:</strong></p>
  
  <pre><code>&lt;td style="width: 25%"&gt;
      &lt;div class="outer-img-wrap"&gt;
          &lt;div class="inner-img-wrap"&gt;
              &lt;img src="http://placehold.it/64x64" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>produces centered responsive images in a table cell of the appropriate width. All images end up having the same width and thats what I want. </p>
  
  <p>I would also like the images to have the same height in a responsive manner. So I added this <strong>Javascript</strong> to the page to update the padding.</p>
  
  <pre><code>function resizeImageElements()
  {
      var imageElements = $(".outer-img-wrap .inner-img-wrap img");
      var imageElementsMaxHeight = -1;
      imageElements.map( function(index) {
          // compare the height of the img element
          if( $(this).height() &gt; imageElementsMaxHeight ) {
              imageElementsMaxHeight = $(this).height();
          }
      } );
  
      imageElements.map( function(index) {
          var computeTopBottomPadding = ( imageElementsMaxHeight - $(this).height() ) / 2;
          $(this).css( {
              "padding-top": computeTopBottomPadding,
              "padding-bottom": computeTopBottomPadding,
          } );
      } );
  }
  
  resizeImageElements();
  </code></pre>
  
  <p>The <strong>Question</strong> is: Can I achieve the same effect without the Javascript code; just using CSS?</p>
  
  <p><strong>Fiddle</strong> at <a href="http://jsfiddle.net/ybkgLq4d/">http://jsfiddle.net/ybkgLq4d/</a></p>