JSFiddle - React, Tailwind, and code Playground

HTML

Portrait
<div>

<div class="portrait">
css
    <img class="css" src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>

<div class="portrait">
css3
<img class="css3" src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>
<div style="clear:both;"></div>
</div>
<br/>
-----------------------------------------------------
Landscape
<div>
<div class="landscape">
css
    <img class="css"  src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>
<div class="landscape">
css3
<img class="css3" src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>
<div style="clear:both;"></div>
</div>
<br/>
-----------------------------------------------------
Square
<div>
<div class="square">
    css
    <img  class="css" src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>
<div class="square">
css3
<img class="css3" src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>
<div style="clear:both;"></div>
</div>
<br/>
-----------------------------------------------------
Big
<div>
<div class="big">
    css
    <img  class="css"  src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">        
</div>

<div class="big">
css3
<img class="css3" src="http://www.clker.com/cliparts/S/J/0/v/Q/F/blue-circle-outline-th.png">
</div>
<div style="clear:both;"></div>
</div>

CSS

.css{
    max-width: 100%;
    max-height: 100%;
    }

.css3{
height: 100%;
width: 100%;

object-fit: contain; 
}

.portrait {
    height: 80px;
    width: 50px;
    float:left;
}

.landscape {
    height: 30px;
    width: 80px;
    float:left;
}

.square {
    height: 75px;
    width: 75px;
    float:left;
}

.big{
  width:200px;
  height:200px;
  float:left;
}