How in the CSS to maintain the aspect ratio div'a?

Need to make div fill all available space, while preserving the aspect ratio of 4:3. Example in the picture:
466f9cb95e07426681c5c532c3cc9aa9.png
How can I do that without using JS?
July 9th 19 at 10:51
3 answers
July 9th 19 at 10:53
Solution
dabblet.com/gist/894edc6dcc6e65260acce7874830a39f

Just need to keep the proportions the same, you need to follow the proportions of the screen.

div {
 margin: auto; 
 width: 100vw;
 height: 75vw;
}

@media screen and (min-aspect-ratio: 4/3) {
 div {
 width: 133.33 vh;
 height: 100vh;
}
}
July 9th 19 at 10:55
Will not work, because the first picture is not achieved by the code. It by increasing the width of the browser the div just goes down over the edge of the screen, and must remain fully visible and the left-to the right of it appear the field. - luis commented on July 9th 19 at 10:58
July 9th 19 at 10:57
@media screen and (min-width: 480px) {

}
@media screen and (min-width: 720px) {

}
@media screen and (min-width: 1080px) {

}

minwidth Google themselves
but the meaning is the same
using the preprocessor to manipulate the properties
w3schools
google dev
thus it is possible to make the switching between the first and second option only if it would depend on the width of the screen. And it also depends on height too. - luis commented on July 9th 19 at 11:00
:
device-height (min-device-height, max-device-height)
device-width (min-device-width max-device-width)
read, Google, learn - luis commented on July 9th 19 at 11:03

Find more questions by tags CSS