3 ms·
Use CSS variables: div { —-width: 100px; —-ratio: 0.6666; width: var(—-width); height: calc(var(—width) * var(—ratio)); }
by bbx 5y ago
Use CSS variables:
div {
—-width: 100px;
—-ratio: 0.6666;
width: var(—-width);
height: calc(var(—width) * var(—ratio));
}
- spartanatreyu 5y agoYou have to be very careful around doing this. If the unit assigned to length variable changed from pixels to percentage, you may end up with unintended and hard to debug behaviour. Look at points: 2, 4 & 5 on my comment here: https://news.ycombinator.com/item?id=30282458 https://news.ycombinator.com/item?id=30282458. Point 4 in particular since there are so many gotchas with percentage units. Someone else could change the styles for a different element and it would break your element's styles in a hard to debug way. It'll be better to use aspect-ratio.