css background размер картинки

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Абсолютное изменение размера

Могут применяться единицы измерения.

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

Использование процентов может быть полезно для адаптивного дизайна. Поменяйте ширину демонстрационной страницы чтобы понять, как изменяются размеры.

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Заполнение фоном

Свойство background-size также понимает ключевое слово cover . Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

Масштабирование нескольких фонов

Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

Пример

Укажите размер фонового изображения с «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»:

Есть блок, с фоном.

А можно тут указать размер этого изображение? Хочу под каждое расширение экрана что бы сжималось, а то придеться делать много картинок под каждоме расширение.

1 ответ 1

Пример с contain :

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459