Aspect ratio в CSS — это свойство, которое позволяет контролировать соотношение сторон элемента веб-страницы. Это особенно полезно при работе с изображениями и видео, когда необходимо сохранить их пропорции при изменении размера окна браузера или устройства.

Свойство aspect-ratio определяет соотношение между шириной и высотой элемента веб-страницы. Оно принимает два значения: первое значение указывает на ширину элемента, а второе — на высоту. Соотношение сторон указывается в виде дроби, например, 16/9 или 4/3. Если значение свойства aspect-ratio указано только один раз, то браузер автоматически вычисляет второе значение, чтобы сохранить пропорции элемента.

Вот пример использования свойства aspect-ratio:

img {
  aspect-ratio: 16/9;
}

В этом примере мы указываем, что изображение должно иметь соотношение сторон 16/9. Таким образом, браузер автоматически вычисляет высоту изображения, чтобы сохранить пропорции.

Кроме того, свойство aspect-ratio может быть использовано в комбинации с другими свойствами CSS, такими как width или height. Например, если мы хотим, чтобы изображение имело ширину 50% от ширины родительского элемента и соотношение сторон 16/9, мы можем использовать следующий CSS-код:

img {
  aspect-ratio: 16/9;
  width: 50%;
}

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

video {
  aspect-ratio: 16/9;
  width: 100%;
}

В этом примере мы указываем, что видео должно иметь соотношение сторон 16/9 и занимать всю доступную ширину родительского элемента.

В заключение, свойство aspect-ratio в CSS позволяет контролировать соотношение сторон элементов веб-страницы, что очень полезно при работе с изображениями и видео. Это свойство позволяет сохранять пропорции элементов при изменении размера окна браузера или устройства и упрощает работу с разными устройствами и экранами.