diff --git a/src/components/status.css b/src/components/status.css index a472bbe8..247600cf 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -825,6 +825,12 @@ .timeline-deck .status .content.truncated ~ .card { display: none; } +.status .content .inner-content { + > img[height] { + height: auto; + aspect-ratio: var(--original-aspect-ratio); + } +} .status .content .inner-content a:not(.mention, .has-url-text) { color: var(--link-text-color); } diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index d6157352..4a30481e 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -242,6 +242,17 @@ function _enhanceContent(content, opts = {}) { } } + // ADD ASPECT RATIO TO ALL IMAGES + if (enhancedContent.includes('<img')) { + dom.querySelectorAll('img').forEach((img) => { + const width = img.getAttribute('width') || img.naturalWidth; + const height = img.getAttribute('height') || img.naturalHeight; + if (width && height) { + img.style.setProperty('--original-aspect-ratio', `${width}/${height}`); + } + }); + } + if (postEnhanceDOM) { queueMicrotask(() => postEnhanceDOM(dom)); // postEnhanceDOM(dom); // mutate dom