mirror of
https://github.com/tomfran/typo.git
synced 2025-04-25 21:19:55 +03:00
![]() 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. |
||
---|---|---|
.. | ||
_default | ||
partials | ||
404.html |