▍Часть 17
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой, одиннадцатой, двенадцатой, тринадцатой и четырнадцатой, пятнадцатой и шестнадцатой частями.
▍Сохранение пропорций: aspect-ratio: <width> / <height>
И, наконец, последний инструмент - самый экспериментальный из всех. Он был недавно представлен в Chrome Canary в Chromium 84, а Firefox ведёт активную работу над его внедрением, но пока что в стабильных версиях браузеров он не поддерживается.
Тем не менее, я хочу упомянуть и его, потому что он решает достаточно часто встречаемую проблему - сохранение пропорций изображений.
При использовании свойства aspect-ration, когда я изменяю размер карточки, зелёный блок сохраняет пропорции 16x9: aspect-ration: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Продолжение следует...#советы #coding #css