html.okpython.net
Основы создания сайтов
CSS :: Свойство background-size
css-свойство background-size (от англ. background size – размер фона) задает размеры и управляет масштабированием фонового изображения элемента.
Характеристики
- Значение по умолчанию: auto.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.backgroundSize="value".
Синтаксис
background-size: <размер фона>[, <размер фона>]*, где
<размер фона> = <размер> | <проценты> | auto ]{1,2} | cover | contain.
Значения
- auto – не изменяет исходный размер изображения, используется браузером по умолчанию.
- размеры – пара значений, указываемых через пробел, определяют ширину и высоту фонового изображения в любых доступных в CSS единицах измерения (смотреть). Если будет указано только одно значение, т.е. ширина, то высоту браузер рассчитает автоматически с сохранением пропорций изображения.
- % – пара значений, но указанных в процентах; первое значение определяет ширину фонового изображения относительно ширины элемента, а второе определяет его высоту относительно высоты элемента. Если будет указано только одно значение, браузер будет рассчитывать размеры относительно ширины элемента.
- cover – изображение будет масштабировано с сохранением пропорций под размеры элемента, при этом часть изображения может быть обрезано в зависимости от размеров ширины и высоты как фонового изображения, так и самого элемента.
- contain – изображение будет масштабировано с сохранением пропорций таким образом, чтобы полностью поместиться внутри элемента, при этом изображение нигде не обрезается, но необязательно покрывает всю необходимую фоновую область элемента.
Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-size
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-size
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ padding: 3em; width: 400px; min-height: 40px; border: dashed green 12px; background-color: yellow; background-repeat: no-repeat; background-image: url("images/balls_2015.jpg"); } .background_1{background-size: cover;} .background_2{background-size: contain} .background_3{background-size: 20%;} </style> </head> <body> <p class="background_1"> cover - высота изображения больше его ширины, поэтому<br> по ширине изображение приняло ширину элемента, а по<br> высоте было обрезано по высоте элемента. </p> <p class="background_2"> contain - фоновое изображение полностью поместилось в<br> пределах элемента, но часть площади элемента не была<br> покрыта фоновым изображением. </p> <p class="background_3"> 20% - ширина и высота фонового изображения равны<br> 20% от ширины элемента. </p> </body> </html>
Пример №1