Ok the math was too advanced for CSS
This commit is contained in:
parent
dc7083a11d
commit
c91cda1a2c
|
@ -116,9 +116,12 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
|
|||
if (smaller) setImageSmallerThanParent(smaller);
|
||||
}, [width, height]);
|
||||
|
||||
const maxAspectHeight = window.innerHeight * 0.33;
|
||||
const mediaStyles = {
|
||||
'--width': `${width}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}`,
|
||||
};
|
||||
|
||||
|
|
|
@ -599,7 +599,8 @@
|
|||
min-width: 44px;
|
||||
/* width: auto; */
|
||||
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%);
|
||||
max-height: min(var(--height), 33vh);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue