From 2ddc6996a2b8f7247da6c6aed138aa3a2f6d6e02 Mon Sep 17 00:00:00 2001 From: Ville Viinikka Date: Mon, 6 Jul 2026 20:11:13 +0300 Subject: [PATCH] Image rendering fixes Fix image size when width and height attributes are set. Fix gap in card images with fonts other than Open Sans. --- docs/classless-tiny.css | 2 +- docs/classless.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/classless-tiny.css b/docs/classless-tiny.css index 29c4c08..ff06ec2 100644 --- a/docs/classless-tiny.css +++ b/docs/classless-tiny.css @@ -59,7 +59,7 @@ td:first-child, th:first-child { text-align: left; } tr:hover{ background-color: #f4f5f6; } /* figures */ -img, svg { max-width: 100%; vertical-align: text-top; } +img, svg { max-width: 100%; height: auto; vertical-align: text-top; } p>img:not(:only-child) { float: right; margin: 0 0 .5em .5em; } figure > img { display: block; margin: .5em auto; } figcaption, caption { color: #888; margin-bottom: 1rem; } diff --git a/docs/classless.css b/docs/classless.css index d780998..841b6c2 100644 --- a/docs/classless.css +++ b/docs/classless.css @@ -100,7 +100,7 @@ tr:hover{ background-color: var(--clight); } table img { display: block; } /* figures */ -img, svg { max-width: 100%; vertical-align: text-top; object-fit: cover; } +img, svg { max-width: 100%; height: auto; vertical-align: text-top; object-fit: cover; } p>img:not(:only-child) { float: right; margin: 0 0 .5em .5em; } figure > img { display: inline-block; width: auto; } figure > img:only-of-type, figure > svg:only-of-type { max-width: 100%; display: block; margin: 0 auto .4em; } @@ -258,7 +258,7 @@ summary>* { display: inline; } overflow: hidden; } .card, details[open] { outline: 1px solid var(--cmed); } -.card>img:first-child { margin: -3px -.6rem; max-width: calc(100% + 1.2rem); } +.card>img:first-child { display: block; margin: 0 -.6rem; max-width: calc(100% + 1.2rem); } summary:hover, details[open] summary, .card>p:first-child { box-shadow: inset 0 0 0 2em var(--clight), 0 -.8rem 0 .8rem var(--clight); }