Live
x
<p class="box"> <img src="https://satyr.dev/4000x3000/green?delay=3000&text=IMG with WIDTH/HEIGHT" width="2000" height="1500" alt="Image"></p> <p> Starting from Chromium 88, Firefox 87, and Safari Technology Preview 118 you can use CSS property <code>aspect-ration</code> for maintaining image placeholders.</p>
Live
xxxxxxxxxx20
/* Placeholder color: */.box { aspect-ratio: 4/3; background: grey;}/* Responsive/Fluid image: */.box img { max-width: 100%; height: auto; display: block;}/* Etc. */body { font-family: sans-serif;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.