mirrors/hugo-typo
1
0
Fork 0
mirror of https://github.com/tomfran/typo.git synced 2025-04-25 21:19:55 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #102 from runofthemillgeek/fix/aspect-ratio-layout-shift

Browse source 
Fix layout shifts by preserving aspect-ratio at responsive sizes
This commit is contained in:
Francesco Tomaselli 2025-04-01 11:22:01 +02:00 • committed by GitHub
commit 01624638b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

23
assets/css/main.css
View file

@ -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 {

2
layouts/_default/_markup/render-image.html
View file

@ -46,7 +46,7 @@ and build the img class string as "img-tag1 img-tag2 ..."
{{/* Use the computed classes on the rendered figure */}}
<figure class="{{ $classes }}">
<div>
<div class="img-container" {{ with $imgResource }}style="--w: {{ .Width }}; --h: {{ .Height }};"{{ end }}>
<img loading="lazy" alt="{{ .Text }}" src="{{ $url }}" {{ with $imgResource }}width="{{ .Width }}" height="{{ .Height }}"{{ end }}>
</div>