found this article via the new-ish aspect-ratio css property[0], which was found via this hn discussion about avoiding layout shifts with web fonts[1]. apparen

found this article via the new-ish aspect-ratio css property[0], which was found via this hn discussion about avoiding layout shifts with web fonts[1]. apparently, you can specify aspect-ratio with attr(width) & attr(height) now, and that will keep images responsive (assuming width & height are set on the img) while also reserving space in the document flow until the image is actually loaded in place: img { width: 100%; height: auto; aspect-ratio: attr(width) / attr(height); } neat stuff! [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati... [1]: https://news.ycombinator.com/item?id=30129571 https://news.ycombinator.com/item?id=30129571