From 8e50f5c421b5b44ad33e325e67efc92c64264e72 Mon Sep 17 00:00:00 2001 From: Sangeeth Sudheer Date: Sun, 16 Mar 2025 08:37:22 +0530 Subject: Fix layout shifts by preserving aspect-ratio at responsive sizes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Uses `aspect-ratio` property to constrain height and width of render image's container to allow responsive resizing while maintaining the original aspect ratio and avoiding layout shifts. Previously, even though `width` and `height` attributes were passed to the `img` element, Chrome (and probably others) weren't reserving space for the image as expected because CSS `width`/`height` were both `auto`. At least one of them needed to be a fixed value in order to maintain aspect ratio. Even with this change, it doesn't seem possible to constrain both width and height on the same element at the same time — only one or the other works. The change introduced makes the `img` element constrain width using `max-width` while the parent element constrain height using `max-height` and `aspect-ratio`. This way, we can get responsive sizing on both axes while obeying the constraints. --- assets/css/main.css | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'assets/css/main.css') diff --git a/assets/css/main.css b/assets/css/main.css index 6e83511..033e3cc 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -440,18 +440,19 @@ footer a { /* images */ -figure>div { - width: 100%; - display: flex; - justify-content: center; -} +figure { + .img-container { + aspect-ratio: var(--w) / var(--h); + max-height: var(--figure-img-max-height); + width: auto; + margin-inline: auto; + } -figure img { - max-width: 100%; - max-height: var(--figure-img-max-height); - width: auto; - height: auto; - margin-inline: auto; + img { + display: block; + max-width: 100%; + height: auto; + } } .dark .img-light { -- cgit v1.2.3