Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix width/height not set

Browse source
This commit is contained in:
Lim Chee Aun 2024-04-13 19:21:20 +08:00
parent 260bb8746d
commit 5babdc9d63
1 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/media.jsx
View file

@ -341,13 +341,15 @@ function Media({
if (!hasDimensions) { if (!hasDimensions) {
const $media = e.target.closest('.media'); const $media = e.target.closest('.media');
if ($media) { if ($media) {
const { naturalWidth, naturalHeight } = e.target;
$media.dataset.orientation = $media.dataset.orientation =
e.target.naturalWidth > e.target.naturalHeight naturalWidth > naturalHeight ? 'landscape' : 'portrait';
? 'landscape' $media.style.setProperty('--width', `${naturalWidth}px`);
: 'portrait'; $media.style.setProperty(
$media.style['--width'] = `${e.target.naturalWidth}px`; '--height',
$media.style['--height'] = `${e.target.naturalHeight}px`; `${naturalHeight}px`,
$media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`; );
$media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
} }
} }
}} }}
@ -515,15 +517,20 @@ function Media({
if (!hasDimensions) { if (!hasDimensions) {
const $media = e.target.closest('.media'); const $media = e.target.closest('.media');
if ($media) { if ($media) {
const { naturalHeight, naturalWidth } = e.target;
$media.dataset.orientation = $media.dataset.orientation =
e.target.naturalWidth > e.target.naturalHeight naturalWidth > naturalHeight
? 'landscape' ? 'landscape'
: 'portrait'; : 'portrait';
$media.style['--width'] = `${e.target.naturalWidth}px`; $media.style.setProperty(
$media.style[ '--width',
'--height' `${naturalWidth}px`,
] = `${e.target.naturalHeight}px`; );
$media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`; $media.style.setProperty(
'--height',
`${naturalHeight}px`,
);
$media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
} }
} }
}} }}