JSFiddle - React, Tailwind, and code Playground

by chintsu

HTML

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

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

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

CSS

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
}

div {
  border: solid 1px #000;
}

.portrait {
    height: 180px;
    width: 100px;
}

.landscape {
    height: 100px;
    width: 180px;
}

.square {
    height: 100px;
    width: 100px;
}