diff options
| author | Francesco Tomaselli <tomaselli.fr@gmail.com> | 2025-04-01 11:22:01 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-04-01 11:22:01 +0200 |
| commit | 0899dedab457e6f9ad2f56091d5f7f292019be26 (patch) | |
| tree | a3a8d7d15430493c40c63b7fad0cbb6f547877f1 /assets/css/main.css | |
| parent | 41ea8e970a4563d8cb7529b212742bdca5d519ad (diff) | |
| parent | 8e50f5c421b5b44ad33e325e67efc92c64264e72 (diff) | |
Merge pull request #102 from runofthemillgeek/fix/aspect-ratio-layout-shift
Fix layout shifts by preserving aspect-ratio at responsive sizes
Diffstat (limited to 'assets/css/main.css')
| -rw-r--r-- | assets/css/main.css | 23 |
1 files changed, 12 insertions, 11 deletions
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 { |