diff --git a/src/components/media.jsx b/src/components/media.jsx index e094b824..82d48a05 100644 --- a/src/components/media.jsx +++ b/src/components/media.jsx @@ -338,18 +338,45 @@ function Media({ onLoad={(e) => { // e.target.closest('.media-image').style.backgroundImage = ''; e.target.dataset.loaded = true; - if (!hasDimensions) { - const $media = e.target.closest('.media'); - if ($media) { - const { naturalWidth, naturalHeight } = e.target; - $media.dataset.orientation = - naturalWidth > naturalHeight ? 'landscape' : 'portrait'; - $media.style.setProperty('--width', `${naturalWidth}px`); - $media.style.setProperty( - '--height', - `${naturalHeight}px`, - ); - $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`; + const $media = e.target.closest('.media'); + if (!hasDimensions && $media) { + const { naturalWidth, naturalHeight } = e.target; + $media.dataset.orientation = + naturalWidth > naturalHeight ? 'landscape' : 'portrait'; + $media.style.setProperty('--width', `${naturalWidth}px`); + $media.style.setProperty('--height', `${naturalHeight}px`); + $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`; + } + + // Check natural aspect ratio vs display aspect ratio + if ($media) { + const { + clientWidth, + clientHeight, + naturalWidth, + naturalHeight, + } = e.target; + if ( + clientWidth && + clientHeight && + naturalWidth && + naturalHeight + ) { + 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.classList.add('has-natural-aspect-ratio'); + } + // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`; } } }} diff --git a/src/components/status.css b/src/components/status.css index 3d05463e..803bc0c7 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -1070,6 +1070,10 @@ --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */ width: min(var(--aspectWidth), var(--width), 100%); max-height: min(var(--height), 33vh); + + &.has-natural-aspect-ratio { + --media-radius: 4px; + } } .status .media-container.media-eq1 .media[data-orientation='portrait'] { /* width: auto;