3 ms·
I check out "modern" web development from time to time. What's the state of the art in 2018? Can you have a DIV with a fixed aspect ratio fitted to the screen?
by tzahola 8y ago
I check out "modern" web development from time to time.
What's the state of the art in 2018? Can you have a DIV with a fixed aspect ratio fitted to the screen? Last time I've checked (in 2017) this was impossible without JS.
- detaro 8y ago> Can you have a DIV with a fixed aspect ratio fitted to the screen? It's admittedly far from obvious, but that should be doable by determining the height of the DIV with the padding-top of a child element, and limiting the width with max-width limited to at max height * aspectratio, so it doesn't overflow the bottom if the page gets to wide. Not really anything fancy and new in there either. EDIT: s/width/height, added half sentence explanation.
- tzahola 8y ago>limiting the width with max-width limited to at max width * aspectratio Sorry, I don't understand this.
- detaro 8y agowhops, height not width. Code: max-width: calc(100vh * 16 / 9);
- tzahola 8y agoOk, this works only for fullscreen because of vh. Let's say I want this to work within another DIV too, so you can't use vh. (and the parent DIV's size is flexible, so you can't hardcode it into calc(...)).
- ricardobeat 8y agoFlexbox can handle that.
- tzahola 8y agoCould you show us how, in a JSFiddle or something?