Как в CSS сохранить пропорции div'a?

Question

[softshape]

Нужно сделать так, чтобы div заполнял все свободное место, но при этом сохранял пропорции 4:3. Пример на картинке:

Как это можно сделать без помощи JS?

Comments

[Lynn «Кофеман»]

А внутри дива что?

[softshape]

Алексей Тен: Там меняется содержимое. HTML, Canvas, даже видео.

Answer 1

[Lynn «Кофеман»]

dabblet.com/gist/894edc6dcc6e65260acce7874830a39f

Раз нужно сохранить пропорции, таки нужно следить за пропорциями экрана.

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

@media screen and (min-aspect-ratio: 4/3) {
	div {
		width: 133.33vh;
		height: 100vh;
	}
}

Answer 2

[Дмитрий]

https://jsfiddle.net/soledar10/h3qd4795/
https://jsfiddle.net/soledar10/kzp50zqL/

Comments

[softshape]

Не подойдет, т.к. первая картинка не достигается этим кодом. В нем при увеличении ширины браузера div просто уходит вниз за край экрана, а должен оставаться видимым полностью и слева-справа от него появляются поля.

Answer 3

[Tsiren Naimanov]

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

minwidth загуглите сами
но смысл один и тот же
используя препроцессор манипулировать свойствами
w3schools
google dev

Comments

[softshape]

Tsiren Naimanov, таким образом можно сделать переключение между первым и вторым вариантом только если оно зависело бы от ширины экрана. А оно же зависит и от высоты тоже.

[Tsiren Naimanov]

softshape:
device-height (min-device-height, max-device-height)
device-width (min-device-width, max-device-width)
читайте, гуглите, изучайте