JSFiddle - React, Tailwind, and code Playground

by dmitri14

HTML

<!-- expanding ,enlarging  small image to fit its container-->
<div class="exp" >
     <img  src="http://i.stack.imgur.com/xkF9Q.jpg"/>
</div>       

<div class="exp2" >
     <img  src="http://i.stack.imgur.com/xkF9Q.jpg"/>
</div>  

<div class="exp2" >
     <img  src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
</div> 

<div class="exp2" >
     <img  src="http://www.legalteamusa.net/tacticalip/wp-content/uploads/2012/11/lonely-narrow-street-1qj5cvx.jpg"/>
</div>

CSS

div { 
    border: solid; 
    border-width: 1px; 
    display:inline-block;      
    vertical-align: bottom;  
}
 
/* ----description------ */
/* here height's px is smaller, therefore 
    i use  "min-height" and  "max-height" 
*/
.exp { height:110px;  width:140px }
.exp img{ min-height:100%; max-height:100%   } 


/* -----description2---- */
/* if the width's px is the smallest one, 
    we use  "min-width" and  "max-width" 
*/
.exp2     { height:140px;  width:110px}   
.exp2 img { min-width:100%; max-width:100%   }

 /* you can use either*/