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.

> 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.

>limiting the width with max-width limited to at max width * aspectratio

Sorry, I don't understand this.

whops, height not width. Code:

    max-width: calc(100vh * 16 / 9);

Ok, 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(...)).

Flexbox can handle that.

Could you show us how, in a JSFiddle or something?

I am painful familiar with web development!

We'll you seem to think they work on Chrome Safari. I develop on Firefox and test on others. From other comments you seem to be a desktop developer now reluctantly working on web. Targeting just windows OS would be simpler and easier I agree. But we have moved into multi platform now. Needed to up the skills.

That said for native apps be it desktop or mobile using native tools would be the way to go.

GP said "modern"

I am painful familiar with "modern" web development!

Happy for being pedantic?!

It's not pedantry. That word was the whole point of his/her comment!

And if you're painful (sic) familiar with modern web development why are you still creating div soup?

I don't know, maybe because web components still aren't a thing across all deployment targets?

That Web designers are still playing catchup with native RAD tooling from the 90's?

That React devs so enthusiastically re-discovered how 90's UI were keeping up to speed with slow hardware?

Or maybe because GPU acceleration requires CSS tricks with Z-Order to actually work?

None of that has anything to do with my question, but okay. Never mind.

But "modern" with ironic air quotes is totally different than earnestly unquoted modern.