<h1>
Title
</h1>
<p class="box">
<img src="https://satyr.dev/1000x1000/green?delay=3000&text=IMG with WIDTH/HEIGHT" width="500" height="500" alt="Image">
</p>
<h2>
This text will reflow in older browsers
</h2>
<p>
Starting Chrome 79 and Firefox 71, the browsers use attributes WIDTH and HEIGHT on IMG to define aspect ratio for the space behing loading image. Safari will be ready soon. Source: <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Smashing Mag</a>.
</p>
xxxxxxxxxx
/* Placeholder color: */
.box {
background: grey;
display: inline-block;
}
/* Responsive/Fluid image: */
.box img {
display: block;
max-width: 500px;
height: auto;
}
/* Etc. */
body {
font-family: sans-serif;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.