From 5babdc9d63bf0c146aa6480e81ed06af685155eb Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 13 Apr 2024 19:21:20 +0800
Subject: [PATCH] Fix width/height not set
---
src/components/media.jsx | 31 +++++++++++++++++++------------
1 file changed, 19 insertions(+), 12 deletions(-)
diff --git a/src/components/media.jsx b/src/components/media.jsx
index b12a6e91..235bbb52 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -341,13 +341,15 @@ function Media({
if (!hasDimensions) {
const $media = e.target.closest('.media');
if ($media) {
+ const { naturalWidth, naturalHeight } = e.target;
$media.dataset.orientation =
- e.target.naturalWidth > e.target.naturalHeight
- ? 'landscape'
- : 'portrait';
- $media.style['--width'] = `${e.target.naturalWidth}px`;
- $media.style['--height'] = `${e.target.naturalHeight}px`;
- $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
+ naturalWidth > naturalHeight ? 'landscape' : 'portrait';
+ $media.style.setProperty('--width', `${naturalWidth}px`);
+ $media.style.setProperty(
+ '--height',
+ `${naturalHeight}px`,
+ );
+ $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
}
}
}}
@@ -515,15 +517,20 @@ function Media({
if (!hasDimensions) {
const $media = e.target.closest('.media');
if ($media) {
+ const { naturalHeight, naturalWidth } = e.target;
$media.dataset.orientation =
- e.target.naturalWidth > e.target.naturalHeight
+ naturalWidth > naturalHeight
? 'landscape'
: 'portrait';
- $media.style['--width'] = `${e.target.naturalWidth}px`;
- $media.style[
- '--height'
- ] = `${e.target.naturalHeight}px`;
- $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
+ $media.style.setProperty(
+ '--width',
+ `${naturalWidth}px`,
+ );
+ $media.style.setProperty(
+ '--height',
+ `${naturalHeight}px`,
+ );
+ $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
}
}
}}