JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Изменяйте размеры области просмотра</h1>
<div>
    <img src="//lorempixel.com/500/500/" alt=""/>
</div>
<div>
    <img src="//lorempixel.com/500/100/" alt=""/>
</div>
<div>
    <img src="//lorempixel.com/300/500/" alt=""/>
</div>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
h1 {
    margin: 0;
}
div {
    height: 20%;
    width: 30%;
    
    /* для наглядности */
    padding: 10px;
    background: red;
    margin:10px;
}

img {
    max-width: 100%;
    max-height: 100%;
}