background-size
Размер фоновой картинки.
Синтаксис
background-size: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| cover | keyword | Закрывает весь блок; края могут обрезаться. |
| contain | keyword | Помещается целиком; могут остаться пустые места. |
| width height | length | Точный размер: `100px 50px`, `50%` или одно значение с высотой `auto`. |
Примеры
cover, contain и фиксированный размер:
<style>
div {
display: inline-block;
width: 140px; height: 100px;
border: 1px solid gray;
background: lightgray url(/media/photo-400x250.jpg) center no-repeat;
}
</style>
<div style="background-size: cover;"></div>
<div style="background-size: contain;"></div>
<div style="background-size: 50px;"></div>Примечания
Для <img> и <video> ту же задачу решает object-fit.
См. также
- background-image — Одна или несколько фоновых картинок: файлы или градиенты.
- background-position — Где внутри блока находится фоновая картинка.
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.
Вопросы и ответы по теме
В учебнике
- Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.