JSFiddle - React, Tailwind, and code Playground

by slevin

HTML

<li>
  <a href="#">
    <div class="imgWrap imgWrap_ls"><img src="http://dummyimage.com/600x400/000/fff" alt="" width="78" height="78" />
    </div>
    <p class="customertext">Whats up? <span>read more</span></p>
  </a>
</li>

CSS

/*the div*/
.imgWrap {
 width: 78px;
 height: 78px;
 overflow: hidden;
 position: relative;
 float: left;
 box-shadow: 0 0 7px 1px #202020;
}

/*the image basic css*/
.imgWrap img{
 position: absolute;
 display:block;
 margin-left: 0 auto;
 margin-right: 0 auto;


}

/*if image is landscape, fix width , height to preserve aspect ratio*/
.imgWrap_ls img {   
width:auto;
height: inherit;

}  

/*so if image was portrait, a new class would be like*/
.custImgWrap_pt img {                    
 height: auto;
 width: inherit;
}