В этом кратком обзоре мы рассмотрим, как установить соотношение сторон для изображения, размещаемого на HTML-странице. Это полезно, если нужно уместить изображения различных размеров и пропорций в блок с фиксированными размерами, не искажая их.
Мы будем манипулировать CSS-свойствами, сохраняя исходные изображения без изменений.
Содержание
- Изображение фиксированного размера
- Изображение изменяющегося размера
- Заключение
- Полезные ссылки
Изображение фиксированного размера
Если нужно вывести изображение с заранее определенными размерами, можно воспользоваться атрибутами width и height.
Для сохранения пропорций применим CSS-свойство object-fit, чтобы изображение не деформировалось.
HTML:
<img width="200" height="200" src="/path/to/image.jpeg" alt="Установка соотношения сторон для изображений на HTML-странице">CSS:
img {
object-fit: cover;
}Результат:
Свойство object-fit может принимать значения fill, contain, cover, none, scale-down. Подробнее об этом можно узнать на сайте MDN.
Изображение изменяющегося размера
Чтобы изображение изменяло свои размеры вместе с родительским блоком, сохраняя определенные пропорции, можно воспользоваться оберткой. Оборачивающий элемент заставит изображение сохранять нужные пропорции, заполняя всю его площадь.
HTML:
<div class="aspect-ratio-box">
<img src="/media/desk.jpg" alt="Установка соотношения сторон для изображений на HTML-странице"/>
</div>CSS:
.aspect-ratio-box {
position: relative;
}
.aspect-ratio-box::after {
display: block;
content: '';
padding-bottom: 56.25%; /* соотношение сторон 16:9 */
}
.aspect-ratio-box img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}Результат:
Свойство padding-bottom определяет высоту родительского контейнера, выраженную в процентах от его ширины. Например, при ширине блока 400px, высота составит 56.25% от 400px, то есть около 225px.
Чтобы рассчитать значение padding-bottom для любого соотношения сторон, нужно разделить высоту на ширину и умножить результат на 100. Например, для соотношения сторон 16:9:
9 / 16 = 0.5625
0.5625 * 100 = 56.25Заключение
Мы рассмотрели, как выводить изображения на HTML-странице с сохранением различных пропорций без деформации исходных картинок. Примеры с фиксированными и изменяющимися размерами охватывают многие стандартные ситуации, возникающие при вёрстке.
