JSFiddle - React, Tailwind, and code Playground

by Varinder

HTML

<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/1" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/2" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/3" />
</div>
<p>This text will get pushed down after load starts</p>

CSS

.image-wrapper {
    position:relative;
    height:0;
    padding-bottom:50%;
}
.image-wrapper > img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

#auto { height: auto; }
#fixed { height: 640px; }
#percentage { height: 100%; }