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:
How can I do that without using JS?
July 9th 19 at 10:51
3 answers
July 9th 19 at 10:53

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