1.
aspect-ratio хорошо конечно, но
поддержка пока не очень.
2. способ с паддингом (т.н. padding hack) действительно работает только отталкиваясь от ширины, а от высоты - не получится.
3. решение - использовать САМЫЙ древний способ - с картинкой :) Ведь картинка имеет ratio, следовательно может "раздвинуть" вложенный блок так, как нам нужно.
Для этого создаем в графическом редакторе ПУСТОЙ файл с нужным соотношением сторон. Например, если нам нужно ratio 1:2, то можно создать файл как размером 1px*2px так и 100px*200px, разница будет только в размере файла (я создал png 1px*2px, размером 76 байт).
Далее делаем разметку
<div class="out">
<div class="in">
<img src="test_img.png" alt="">
</div>
</div>
и стили
.out {
position: relative;
width: 200px;
height: 100px;
background: #000;
}
.in {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
right: 10%;
background: red;
}
.in img {
display: block;
height: 100%;
width: auto;
}
общая идея - в
relative внешний блок вкладываем
absolute вложенный, растягиваем его по высоте, и как-то его по ширине позиционируем (я использовал
right: 10%;. Ширину не указываем - ее сформирует
img, который блочный и тоже растянут по высоте (смасштабирован к текущему блоку).
Все, теперь габариты обертки можно менять как угодно, вложенный блок всегда имеет фиксированное соотношение сторон :)
p.s.
- картинку можно потом перевести в data:uri прямо на странице чтоб внешние файлы не грузить
- пробовал еще грузить картинку через псевдоэлемент
.in:before { content: url("test_img.png"); } но это не работает - картинка грузится, но не масштабируется как надо.
Возможно, это как-то решается, не знаю.
