diff options
| -rw-r--r-- | assets/css/main.css | 23 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-image.html | 2 |
2 files changed, 13 insertions, 12 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 { 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 */}} <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> |