javascript - Vertical padding of responsive images -

this css:

.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; } 

applied html:

<td style="width: 25%">     <div class="outer-img-wrap">         <div class="inner-img-wrap">             <img src="http://placehold.it/64x64" />         </div>     </div> </td> 

produces centered responsive images in table cell of appropriate width. images end having same width , thats want.

i images have same height in responsive manner. added javascript page update padding.

function resizeimageelements() {     var imageelements = $(".outer-img-wrap .inner-img-wrap img");     var imageelementsmaxheight = -1;     imageelements.map( function(index) {         // compare height of img element         if( $(this).height() > imageelementsmaxheight ) {             imageelementsmaxheight = $(this).height();         }     } );      imageelements.map( function(index) {         var computetopbottompadding = ( imageelementsmaxheight - $(this).height() ) / 2;         $(this).css( {             "padding-top": computetopbottompadding,             "padding-bottom": computetopbottompadding,         } );     } ); }  resizeimageelements(); 

the question is: can achieve same effect without javascript code; using css?

fiddle @ http://jsfiddle.net/ybkglq4d/

well, it's not clear taking images from. if you're able handle images in backend server (using let's php, python or ruby), create version of them using fixed ratio, way have same dimensions when resized in frontend. favorite option.

if not able or don't want create different version of image, believe best bet using element background image instead of image element itself, , using background-size fit needs.

for example:

.outer-img-wrap {     border: 2px solid gray;     margin: 1vw auto;     max-width: 192px;     text-align: center;     overflow: hidden; } .outer-img-wrap .img {     display:inline-block;     position:relative;     vertical-align: middle;     width:100%;     background-position:center center;     height:50px; /* or whatever height want, use % value relative it's parent element */      /* cross browser */     -moz-background-size:cover;     -o-background-size:cover;     -ms-background-size:cover;     -webkit-background-size:cover;     background-size:cover; } .inner-img-wrap {     background: #000;     border: thin solid #ff9900;     margin: 2px; } 

applied html:

<td style="width: 25%">     <div class="outer-img-wrap">         <div class="inner-img-wrap">             <div class="img" style="background-image:url(http://placehold.it/64x64)"></div>         </div>     </div> </td> 

fiddle: https://jsfiddle.net/ybkglq4d/14/