Свойство background-size
Свойство background-size задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.
Синтаксис
Ключевые слова
| Значение | Описание |
|---|---|
| auto | Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции. |
| cover | Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком. |
| contain | Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте). |
Значение по умолчанию: auto .
Использование
Единицы для размеров и auto могут быть использованы в различных комбинациях, например, так: auto 20px , или 30% 20px , или auto 30% и так далее. В этом случае первый параметр задает размер фона по ширине, а второй параметр — размер фона по высоте. Если указан один параметр — то он будет задавать размер фона и по ширине, и по высоте одновременно.
Пример
Сейчас фоновая картинка будет иметь свой натуральный размер:
Пример
Сейчас фоновая картинка будет размер 300px на 400px (в нашем случае пропорции картинки исказятся):
Пример
Сейчас фоновая картинка будет размер 400px на 400px (в нашем случае пропорции картинки исказятся):
Пример
Сейчас фоновая картинка будет размер 400px по горизонтали, а по вертикали ее размер подстроится так, чтобы пропорции не исказились:
Пример
Сейчас фоновая картинка будет размер 400px по вертикали, а по горизонтали ее размер подстроится так, чтобы пропорции не исказились:
Пример . Значение contain
Посмотрите на работу значения contain :
.elem < background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
Пример . Значение cover
Посмотрите на работу значения cover :
.elem < background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
Пример . Улучшим работу cover
Работу значения cover можно улучшить, если отцентрировать картинку с помощью свойства background-position (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):
.elem < background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
. Значения в процентах
В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):
Пример . Значения в пикселях и процентах
В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):
Пример . Значение auto для одной из сторон + проценты
В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так — картинка будут оставаться неискаженной):
Пример . Значение auto для одной из сторон + пиксели
В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:
Пример . Значение 100% для обеих сторон
Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100% , можно было просто написать одно значение):
Пример . Значение contain
Сейчас картинка будет занимать всю ширину или всю высоту с сохранением пропорций. Поуменьшайте окно браузера, чтобы увидеть, что картинка в различных состояниях будет занимать или всю ширину или всю высоту:
Пример . Значение cover
Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:
Сравните с тем, как будет выглядеть картинка по умолчанию (при значении auto). Поуменьшайте окно браузера, чтобы увидеть отличия:
Смотрите также
- свойство background ,
представляющее собой свойство-сокращение для фона
background-size
Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
Примечание: Если значение этого свойства не задано в сокращённом свойстве background , которое применяется к элементу после CSS-свойства background-size , то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.
| Начальное значение | auto auto |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | нет |
| Проценты | относительно области позиционирования фона |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | повторяющийся список из |
Синтаксис
/* Ключевые слова */ background-size: cover; background-size: contain; /* Указано одно значение - ширина изображения, */ /* высота в таком случае устанавливается в auto */ background-size: 50%; background-size: 3em; background-size: 12px; background-size: auto; /* Указаны два значения - */ /* ширина и высота соответственно */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Значения для нескольких фонов */ /* Не путайте такую запись с background-size: auto auto */ background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Глобальные значения */ background-size: inherit; background-size: initial; background-size: unset;
Значения
Значение , которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin . Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed , область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.
Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.
Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.
Ключевое слово, обратное contain . Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.
Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
Предупреждение: Это поведение изменилось в Gecko 8.0. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
Фоновые изображения, сгенерированные из элементов с использованием -moz-element() (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.
Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
Визуализированный размер фонового изображения затем вычисляется следующим способом:
Если оба атрибута в background-size заданы и различны от auto :
Фоновое изображение отображается в указанном размере.
Если background-size содержит contain или cover :
Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
Если background-size установлен как auto или auto auto :
Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain . Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.
Формальный синтаксис
background-size =
# (en-US)
=
[ (en-US) (en-US) | (en-US) auto ] (en-US) (en-US) | (en-US)
cover | (en-US)
contain
=
| (en-US)
Примеры
Эта демонстрация background-size: cover и эта демонстрация background-size: contain предназначены для открытия в новых окнах, чтобы вы могли видеть, как contain и cover ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает background-size и взаимодействует с другими свойствами background-* , должна в значительной степени охватить оставшуюся основу в том, как использовать background-size отдельно и в сочетании с другими свойствами.
Замечания
Если вы указываете градиент в качестве фона и указали background-size , который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50% ). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.
.bar width: 50px; height: 100px; background-image: gradient(. ); /* Лучше не использовать */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* Допускается */ background-size: 25px 50px; background-size: 50% 50%; >
Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.
Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # the-background-size |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Справочник по CSS (en-US)
- Несколько фонов (en-US)
- Масштабирование фонового изображения (en-US)
background-size
Масштабирует фоновое изображение согласно заданным размерам.
Синтаксис
background-size: [ | | auto ] | cover | contain
Значения
<значение>Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. Задает размер фоновой картинки в процентах от ширины или высоты элемента. auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
background-size . Браузеры
Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .
Opera до версии 10.53 использует нестандартное свойство -o-background-size .
Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .
CSS по теме
CSS свойство background-size
Свойство background-size устанавливает размер фонового изображения.
Данное свойство имеет пять значений: auto, length, percentages, cover, contain.
Auto устанавливает фоновое изображение в его оригинальном размере. Является значением по умолчанию. Length устанавливает высоту и толщину свойства background image . Отрицательные значения недопустимы. Percentage устанавливает высоту и толщину свойства background-image в процентах. Отрицательные значения недопустимы.
Cover масштабирует изображение без растягивания. Если пропорции изображения различаются от элемента, изображение будет срезано по вертикали или по горизонтали таким образом, чтобы не осталось свободного места.
Contain масштабирует фоновое изображение таким образом, чтобы изображение полностью поместилось внутрь блока.
| Значение по умолчанию | auto |
| Применяется | Ко всем элементам, а также к ::first-letter и ::first-line. |
| Наследуется | Нет |
| Анимируемое | Да. Размер фонового изображения анимируем. |
| Версия | CSS3 |
| DOM синтаксис | object.style.backgroundSize = «50% 100%»; |
Синтаксис
background-size: auto | length | cover | contain | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> body < background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 300px 200px; background-repeat: no-repeat; > style> head> body> h2>Пример background size. h2> p>Здесь может быть любая информация. p> body> html>В этом примере применено значение length. Оно устанавливает толщину и высоту фонового изображения. Первое значение устанавливает толщину, а второе — высоту. При наличии только одного значения, второе значение будет установлено на «auto».
Пример, где толщина и высота фонового изображения установлены в процентах:
Пример
html> html> head> title>Заголовок документа title> style> body < background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 40% 100%; background-repeat: no-repeat; > style> head> body> h2>Пример background size. h2> p>Здесь может быть любая информация. p> body> html>Пример со значением cover. Оно масштабирует изображение без растягивания:
Пример
html> html> head> title>Заголовок документа title> style> body < background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; background-repeat: no-repeat; > style> head> body> h2>Пример background size. h2> p>Здесь может быть любая информация. p> body> html>Значения
| Значение | Описание |
|---|---|
| auto | Это значение по умолчанию. Устанавливает background-image в оригинальном размере. |
| length | Устанавливает толщину и высоту фонового изображения. Первое значение устанавливает толщину, а второе — высоту. При одном значении, второе значение устанавливается на auto. Обозначается в “px”, “em”. |
| percentage | Устанавливает толщину и высоту в процентах. Первое значение устанавливает толщину, а второе — высоту. При одном значении, второе значение устанавливается на auto. |
| cover | Увеличивает изображение таким образом, чтобы полностью покрыть фоновую часть. |
| contain | Фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 15.0+ | 4.0+ 3.6 -moz- |
7.0+ | 11.5+ 10.1 -o- |