5 ms·

It would be nice if we could have a ratio rule in CSS for all block elements, so adjusting one dimension would automatically alter the other, preserving the rat

It would be nice if we could have a ratio rule in CSS for all block elements, so adjusting one dimension would automatically alter the other, preserving the ratio at all screen sizes. e.g.: width: 2000px; max-width: 100%; ratio: 16/9; Of course this gets tricky when width and height are both specified and they don't match the given ratio, but that just means that one needs to always override the other. Edit to add: Or maybe it would be better to just have the ability to lock the ratio, such as: ratio: fixed;

onion2k 8y ago
Aspect Ratio is coming in CSS4. https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/ https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-c...
- DamnInteresting 8y ago
  This pleases me.
aargh_aargh 8y ago
To be honest, if you know one dimension and the aspect ratio, you're more likely to know both dimensions.
- runarberg 8y ago
  Well, the thing is with `width: 9000px; max-width: 100%;` is that you know neither. And it forces people to use silly things like `padding` to maintain aspect ratio in e.g. embedded videos.
lewiscollard 8y ago
You (or others) may or may not know it is already possible in CSS as it is. To force 16:9: .DamnInteresting { position: relative; display: block; } .DamnInteresting::before { content: ''; display: block; /* 16:9 shim! */ padding-bottom: 56.25%; } .DamnInteresting img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Ugly, but it's easy to make a mixin (or similar) if you're using a preprocessor! (The ::before element isn't stricly necessary; the padding can go on the .DamnInteresting element directly - just make sure .DamnInteresting is wrapped in a containing element of your desired width and you can even use inline styles for the padding shim.) (Edit: a word)

onion2k 8y ago

Aspect Ratio is coming in CSS4. https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/ https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-c...

DamnInteresting 8y ago
This pleases me.

aargh_aargh 8y ago

To be honest, if you know one dimension and the aspect ratio, you're more likely to know both dimensions.

runarberg 8y ago
Well, the thing is with `width: 9000px; max-width: 100%;` is that you know neither. And it forces people to use silly things like `padding` to maintain aspect ratio in e.g. embedded videos.

lewiscollard 8y ago

You (or others) may or may not know it is already possible in CSS as it is. To force 16:9: .DamnInteresting { position: relative; display: block; } .DamnInteresting::before { content: ''; display: block; /* 16:9 shim! */ padding-bottom: 56.25%; } .DamnInteresting img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Ugly, but it's easy to make a mixin (or similar) if you're using a preprocessor! (The ::before element isn't stricly necessary; the padding can go on the .DamnInteresting element directly - just make sure .DamnInteresting is wrapped in a containing element of your desired width and you can even use inline styles for the padding shim.) (Edit: a word)