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. --- layouts/_default/_markup/render-image.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'layouts/_default') diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index e6a5c39..a1bc158 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -46,7 +46,7 @@ and build the img class string as "img-tag1 img-tag2 ..." {{/* Use the computed classes on the rendered figure */}}
-
+
{{ .Text }}
-- cgit v1.2.3