JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<!-- MONA LISA (portrait) -->
<div>
    original image: <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
</div>
    
<div class=fill style="width:100px; height:200px">
    <header>header content</header>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
    <footer>footer content</footer>
</div>
    
<div class=fill style="width:200px; height:100px">
    <header>header content</header>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
    <footer>footer content</footer>
</div>
    
<div class=fill style="width:100px; height:100px">
    <header>header content</header>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
    <footer>footer content</footer>
</div>

<!-- CREATION OF ADAM (landscape) -->
<div>
    original image: <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Michelangelo,_Creation_of_Adam_03.jpg/50px-Michelangelo,_Creation_of_Adam_03.jpg">
</div>
    
<div class=fill style="width:100px; height:200px">
    <header>header content</header>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Michelangelo,_Creation_of_Adam_03.jpg/50px-Michelangelo,_Creation_of_Adam_03.jpg">
    <footer>footer content</footer>
</div>
    
<div class=fill style="width:200px; height:100px">
    <header>header content</header>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Michelangelo,_Creation_of_Adam_03.jpg/50px-Michelangelo,_Creation_of_Adam_03.jpg">
    <footer>footer content</footer>
</div>
    
<div class=fill style="width:100px; height:100px">
    <header>header content</header>
    <img...

CSS

header,footer{
    position:absolute;
    left:0
}
header { top:20% }
footer { bottom:20% }

/* From here on is the meat of the code */
div.fill {
    border:1px dashed red;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div.fill img {
   flex-shrink:0;
  
    min-width:100%;
    min-height:100%
}