JSFiddle - React, Tailwind, and code Playground

by dmitri14

HTML

<!-- expanding ,enlarging  small image to fit its container-->
<div>100x100px ---------- wide image --------------- narrrow   </div> <br>
<div>no problem ---------- no owerflow , undamaged aspect both     </div> <br>
<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>    
 <br><br>
<div class="exp" >
     <img  src="http://i.stack.imgur.com/xkF9Q.jpg"/>
</div>       

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

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

CSS

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

/* -----description2---- */
/* if the width's px is the smallest one, 
    we use  "min-width" and  "max-width" 
*/ 
/*  notice: wrapper's height and img's max-height must be same for no owerflow*/
.exp2     { height:150px;  width:110px}   
.exp2 img {  width:100%;  max-height:150px }