simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ok the math was too advanced for CSS

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-01 23:54:28 +08:00
parent dc7083a11d
commit c91cda1a2c
2 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/media.jsx
View file

@ -116,9 +116,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
if (smaller) setImageSmallerThanParent(smaller); if (smaller) setImageSmallerThanParent(smaller);
}, [width, height]); }, [width, height]);
const maxAspectHeight = window.innerHeight * 0.33;
const mediaStyles = { const mediaStyles = {
'--width': `${width}px`, '--width': `${width}px`,
'--height': `${height}px`, '--height': `${height}px`,
// Calculate '--aspectWidth' based on aspect ratio calculated from '--width' and '--height', max height has to be 160px
'--aspectWidth': `${(width / height) * Math.max(160, maxAspectHeight)}px`,
aspectRatio: `${width} / ${height}`, aspectRatio: `${width} / ${height}`,
}; };

3
src/components/status.css
View file

@ -599,7 +599,8 @@
min-width: 44px; min-width: 44px;
/* width: auto; */ /* width: auto; */
min-height: 44px; min-height: 44px;
--aspectWidth: calc(--width / --height * max(160px, 33vh)); /* --maxAspectHeight: max(160px, 33vh);
--aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
width: min(var(--aspectWidth), var(--width), 100%); width: min(var(--aspectWidth), var(--width), 100%);
max-height: min(var(--height), 33vh); max-height: min(var(--height), 33vh);
} }