Размер картинки фона css: Как изменить размер фоновой картинки через CSS3

Как изменить размер фоновой картинки через CSS3

Оригинал: sitepoint.com/css3-background-size-property

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

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

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

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

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

background-size: ширина высота;

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

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

background-size: 100px 200px;

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

background-size: 100px;
  /* аналогично */
background-size: 100px auto;

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

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

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

background-size: 50% auto;

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

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

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

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

background-size: contain;

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

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

background-size: cover;

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

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

background:
  url("sheep.png") 60% 90% no-repeat,
  url("sheep.png") 40% 50% no-repeat,
  url("sheep.png") 10% 20% no-repeat #393;
  background-size: 240px 210px, auto, 150px;

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

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

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

Просмотр демонстрационной страницы с background-size.

CSS3фон

CSS по теме

• background-size

Статьи по теме

• Как изменить размер фоновой картинки через CSS3
• Как растянуть фон на всю ширину окна?
• Масштабирование фона

size — свойство css :: руководство cssdot.ru

Свойство background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Так как для элемента может быть указанно несколько фоновых картинок, то и с помощью данного свойства можно указать размеры для нескольких картинок — они последовательно перечисляются через запятую.  Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.

Допустимые значения

• length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т. д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. Отрицательные значения запрещены.
• percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. Отрицательные значения запрещены.
• auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки. Первое значение отвечает за ширину картинки, второе — за высоту. 
• cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
• contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.

Примечания

Это свойство описанно в CSS3 модуле CSS Backgrounds and Borders Module Level 3.

Примеры использования

 

Свойство background-size определено в спецификации CSS 3 модуль Backgrounds and Borders Level 3 (фон и рамки, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

• -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
• -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
• -webkit-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.

• Спецификация стандарта CSS 3
• Описание на Mozilla Developer Network
• Описание на Microsoft Developer Network
• Описание на Safari Developer Library

Краткое описание

Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Синтаксис:

[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*

По умолчанию:

auto

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.backgroundSize

Кроссбраузерная совместимость

Internet Explorer

5	5.5	6	7	8	9	10a
—	—	—	—	—	+	+

Firefox

2. 0	3.0	3.5	3.6	4.0	5.0	6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0
—	—	—	—	+	+	+	+	+	+	+	+	+	+

Chrome

1.0	2.0	3.0	4.1	5.0	6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20.0
—	—	—	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+

Safari

1.0	1.1	1.2	1.3	2.0	3.0	3.2	4.0	5.0
—	—	—	—	—	—	—	—	+

Opera

8. 5	9.2	9.5	9.6	10.1	10.5	10.6	11.0	11.1	11.5	11.6
—	—	—	—	—		+	+	+	+	+

Фоновое изображение CSS — уменьшить до фиксированного размера div

спросил 6 лет, 6 месяцев назад

Изменено 12 месяцев назад

Просмотрено 72к раз

У меня есть следующий код на https://jsfiddle.net/ncrcfduz и фоновое изображение на https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg. Мне нужно изменить масштаб фонового изображения, чтобы оно поместилось в div, предпочитая отображать большую часть «центрированного» содержимого изображения. Следующий код показывает только верхний левый угол изображения.

 .контейнер {
  фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) исправлено отсутствие повторов;
  -webkit-background-size: обложка;
  -moz-background-size: обложка;
  -o-background-size: обложка;
  размер фона: обложка;
  высота: 150 пикселей;
  ширина: 300 пикселей;
} 

 <дел>

 .контейнер{
    фон: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) центр без повторов;
    -webkit-background-size: содержит;
    -moz-background-size: содержать;
    -o-фоновый размер: содержать;
    размер фона: содержит;
    
    высота: 150 пикселей;
    ширина: 300 пикселей;
} 

 <дел>