I’m using this CSS:
To center an image and scale it based on window size, stopping the scaling at 768px. I can’t display the bottom part of the image when the window is at a larger size (it works fine when the window is minimized). When I change the height of the .image class to more than 600px, it breaks the image scaling.
Пример
Укажите размер фонового изображения с "Auto" и в пикселях:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
>
#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
>
Подробнее примеры ниже.
Определение и использование
Свойство background-size определяет размер фоновых изображений.
С этим свойством можно использовать четыре различных синтаксиса: синтаксис ключевого слова («Auto», «Cover» и «содержит»), синтаксис с одним значением (устанавливает ширину изображения (высота становится «авто»), синтаксис с двумя значениями (первое значение: ширина изображения, второе значение: Height) и синтаксис нескольких фонов (разделенных запятой).
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.backgroundSize="60px 120px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Синтаксис CSS
Значения свойств
| Значение | Описание |
|---|---|
| auto | Значение по умолчанию. Фоновое изображение отображается в исходном размере |
| length | Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второй параметр имеет значение "Auto". Читать о единицах длины |
| percentage | Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе устанавливается в "Auto" |
| cover | Измените размер фонового изображения, чтобы охватить весь контейнер, даже если он должен растянуть изображение или вырезать немного от одного из краев |
| contain | Измените размер фонового изображения, чтобы убедиться, что изображение полностью отображается |
| initial | Присваивает этому свойству значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство из родительского элемента. Читайте о inherit |
Другие примеры
Пример
Укажите размер фонового изображения с процентами:
#example1 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
>
#example2 <
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
>
Пример
Укажите размер фонового изображения с помощью "Cover":
Пример
Укажите размер фонового изображения с "содержать":
Пример
Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с "содержать", а второй фон-изображение с "Cover":
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-size |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|
Описание
Масштабирует фоновое изображение согласно заданным размерам.
Синтаксис
background-size: [ | | auto ] <1,2>| cover | contain
Значения
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Браузеры
Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .
Opera до версии 10.53 использует нестандартное свойство -o-background-size .
Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .