diff --git a/src/components/media.jsx b/src/components/media.jsx index 60054d48..3dc1f11f 100644 --- a/src/components/media.jsx +++ b/src/components/media.jsx @@ -362,21 +362,29 @@ function Media({ naturalWidth && naturalHeight ) { - const naturalAspectRatio = ( - naturalWidth / naturalHeight - ).toFixed(2); - const displayAspectRatio = ( - clientWidth / clientHeight - ).toFixed(2); - const similarThreshold = 0.05; + const minDimension = 88; if ( - naturalAspectRatio === displayAspectRatio || - Math.abs(naturalAspectRatio - displayAspectRatio) < - similarThreshold + naturalWidth < minDimension || + naturalHeight < minDimension ) { - $media.dataset.hasNaturalAspectRatio = true; + $media.dataset.hasSmallDimension = true; + } else { + const naturalAspectRatio = ( + naturalWidth / naturalHeight + ).toFixed(2); + const displayAspectRatio = ( + clientWidth / clientHeight + ).toFixed(2); + const similarThreshold = 0.05; + if ( + naturalAspectRatio === displayAspectRatio || + Math.abs(naturalAspectRatio - displayAspectRatio) < + similarThreshold + ) { + $media.dataset.hasNaturalAspectRatio = true; + } + // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`; } - // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`; } } }} diff --git a/src/components/status.css b/src/components/status.css index 2f4c1488..1b43933e 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -1074,6 +1074,11 @@ &[data-has-natural-aspect-ratio] { --media-radius: 4px; } + + &[data-has-small-dimension] img { + object-fit: contain; + image-rendering: pixelated; + } } .status .media-container.media-eq1 .media[data-orientation='portrait'] { /* width: auto; @@ -1349,22 +1354,27 @@ body:has(#modal-container .carousel) .status .media img:hover { background-color: var(--outline-color); } -.status.large .media-large-container { +.status .media-large-container { width: 100%; max-width: 100%; display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; + flex-direction: row; + /* align-items: center; + justify-content: center; */ column-gap: 8px; flex-wrap: wrap; - text-align: center; + + .media[data-has-small-dimension] { + width: auto !important; + } figure { - justify-content: center; + flex-direction: column; figcaption { - text-align: center; + flex-grow: 0 !important; + flex-basis: auto !important; + align-self: flex-start !important; } } }