▍Часть 18
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой, одиннадцатой, двенадцатой, тринадцатой и четырнадцатой, пятнадцатой, шестнадцатой и семнадцатой частями.
▍Сохранение пропорций: aspect-ratio: <width> / <height>
Чтобы поддерживать соотношение сторон 16 x 9 без этого свойства, следует использовать хак с padding-top, задав padding 56.25%. Но сСкоро у нас появится свойство, позволяющее не прибегать к этому хаку и вычислению процентов. Можно сделать квадрат с соотношением сторон 1 / 1 или прямоугольник с соотношением 2 / 1, или любым другим, необходимым для изображения определённых размеров.
.square {
aspect-ratio: 1 / 1;
}
Хотя эта функция все еще находится на стадии разработки, о ней полезно знать, поскольку она решает множество споров разработчиков, с которыми я и сама много раз сталкивалась, особенно когда речь идет о видео и фреймах.#советы #coding #css