Как пропорционально уменьшить высоту элемента?

Question

[Дмитрий]

У меня блок высотой 636px и шириной 50%. Никак не могу придумать как его пропорционально уменьшить при сужении экрана :( Через calc хочу, но не придумал.
к примеру, с 768px и меньше?

Comments

[aendnn]

max-height: 636px?

[Михаил]

https://css-tricks.com/aspect-ratio-boxes/ может поможет

[Дмитрий]

aendnn, картинка выставлена бэкграундом и тогда все сплющивается по высоте контента . . . т.к. остается маленький элемент с паддингом 20 пикселей.
не подходит такой вариант

Answer 1

[Рома Зварич]

1) Определяете отношение высоты к ширине, которую хотите соблюдать
2) Внутрь существующего блока вкладываете еще один блок и задаёте ему свойство "padding-bottom: 50%", где "50%" - соотношение высоты к ширине (в данном случае, высота составляет 50% от ширины). И делаете его относительно позиционированным
3) Внутрь него вкладываете абсолютно позиционированный блок, растягивая на всю ширину/высоту.

Оно?

Comments

[Дмитрий]

какой интересный вариант Оо
спасибо!

[Рома Зварич]

Дмитрий, если поможет, не забудьте отметить решением.

[Dmaw]

Волшебно! Спасибо!