mirror of
https://github.com/tomfran/typo.git
synced 2025-04-26 05:29:54 +03:00
47ba12bd1c
Image render hook now computes width/height of local images and adds them as attributes. This patch also adds relevant CSS changes to prevent stretchy images. The main reason for this change is to avoid content shifts when images load. Without providing width/height, browser doesn't have info to know the aspect ratio to reserve some space until the image loads. With this change, browser knows the intrinsic size and aspect-ratio to reserve space and avoid content shifts in the page. I believe this also fixes an issue I face in Safari where sometimes, an image below the fold wouldn't load and thus have zero height because it has loading="lazy". To avoid images getting stretched and images overflow/filling the entire screen when their intrinsic size is larger than the container size, I've added some CSS. A configurable `max-height` is present which is used for `figure img` elements. This especially helps when you have tall images like mobile screenshots. |
||
|---|---|---|
| .. | ||
| _default | ||
| partials | ||
| 404.html | ||