Размер картинки background css – Как заставить ширину блока подстраиваться под размер фона? — Хабр Q&A

Содержание

Свойство background-size | CSS справочник

CSS свойства

Определение и применение

CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.

Поддержка браузерами

CSS синтаксис:

background-size:"auto | length | cover | contain | initial | inherit";

JavaScript синтаксис:

object.style.backgroundSize = "150px 150px"

Значения свойства

ЗначениеОписание
autoФоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
lengthУстанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
%Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
coverМасштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
containМасштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Масштабирование фоновых  изображений в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
.test
{background-size : auto;} /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */ .test2 {background-size : 100px 100px;} /* задаем ширину и высоту фонового изображения */ .test3 {background-size : 70% 70%;} /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */ .test4 {background-size : cover;} /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */ .test5 {background-size : contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */ </style> </head> <body> <div class = "test">auto</div> <div class = "test2">100px 100px</div> <div class = "test3">70% 70%</div><br> <div class = "test4">cover</div> <div class = "test5">contain</div> </body> </html>
Масштабирование фоновых изображений в CSS (свойство background-size).CSS свойства

background-size | CSS | WebReference

Масштабирует фоновое изображение, согласно заданным размерам.

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

background-size: <bg-size> [, <bg-size> ]*

<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(/example/image/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Объектная модель

Объект.style.backgroundSize

Примечание

Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.

Opera до версии 10.53 использует свойство -o-background-size.

Firefox до версии 4 использует свойство -moz-background-size.

Opera 9.5 некорректно устанавливает положение фиксированного фона.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

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

Последнее изменение: 27.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

CSS background-size | TuHub

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово (cover или contain), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto. Например:

background-size: cover;       /* ключевое слово */
background-size: contain;     /* ключевое слово */
background-size: 100% 50%;    /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto;    /* не ключевое слово + плюс значение 'auto' */

Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.

Если указано только одно не ключевое значение, то второе считается как auto.

Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).

Синтаксис свойства

  • Синтакис:
    background-size: <bg-size> [ , <bg-size> ]*
    
    /* где */
    
    <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
  • Значение по умолчанию: auto
  • Применяется: ко всем элементам
  • Наследуется: да
  • Анимируется: да, за исключением ключевых слов

Значения свойства

  • <length> -  значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.
  • <percentage> - значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
  • contain - масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
  • cover - масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
  • auto - ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
    • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
    • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
    • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово contain
      .
    • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
    • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.

Поддержка браузерами

CSS3 Background-image options

Пример

Ниже вы увидите пример использования свойства background-size:

Управление размером фонового изображения при помощи css

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.

В более старой версии 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:
     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.

Заключение

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

Не забудьте подписаться на обновления блога, чтобы не пропустить новые интересные статьи.

 

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 - Размер фонового изображения, или его масштаб относительно элемента-контейнера.

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

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

Синтаксис:

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

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

auto

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

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

Наследование:
не наследуется
Тип носителя:

визуальные

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

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


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

Internet Explorer
Firefox
2.03.03.53.64.05.06.07.08.09.010.011.012.013.0
----++++++++++
Chrome
1.02.03.04.15.06.07.08.09.010.011.012.013.014.015.016.017.018.019.020.0
---+++++++++++++++++
Safari
1.01.11.21.32.03.03.24.05.0
--------+
Opera
8.59.29.59.610.110.510.611.011.111.511.6
-----+++++

webkit-background-size - свойство css :: руководство cssdot.ru

Свойство -webkit-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 - масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.

Примечания

Chrome 1-3, Safari 3-4

Свойство -webkit-background-size в движке WebKit изначально было реализовано в рамках черновика спецификации CSS3, в котором отсутствовали ключевые слова contain и cover, а так же предполагалось, что если задан размер фоновой картинки с использованием только одного параметра, то второй параметр считается, не пропорционально размерам картинки, а равен первому.

Свойство -webkit-background-size относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.

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

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

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

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

Синтаксис:

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

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

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

Наследование:
не наследуется
Тип носителя:

визуальные

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

[элемент].style['-webkit-background-size']


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

Internet Explorer
не поддерживается
Firefox
не поддерживается
Chrome
1.02.03.04.15.06.07.08.09.010.011.012.013.014.015.016.017.018.019.020.0
+/-+/-+/-+++++++++++++++++
Safari
1.01.11.21.32.03.03.24.05.0
------+/-+/-+
Opera
не поддерживается

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *