JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<div class="img"> <img id="asd" src="http://placekitten.com/300/600"/></div> 300x600
<div class="img"> <img id="asd" src="http://placekitten.com/600/300"/></div>  600x300
<div class="img"> <img id="asd" src="http://placekitten.com/100/100"/></div>  100x100
<div class="img"> <img id="asd" src="http://placekitten.com/400/400"/></div>  400x400

CSS

.img {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px solid black;
    text-align: center;
    line-height: 200px; /* должна совпадать с высотой */
}
.img img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle; 
}