Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был «Царём горы», наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
Использование background-size: cover
В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.
Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style . Рекомендуется использовать aria-label , который заменит атрибут alt , присутствующий в тегах img .
Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom , позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:
Всё вместе это будет выглядеть следующим образом:
Использование object-fit: cover
Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16
Это свойство применяется непосредственно к тегу img , поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt :
Затем CSS-код дополняется свойством height , которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit , которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height :
В результате получаем следующее:
Когда использовать каждое из решений
Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).
Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.
background-size
For more information about the supported length units, see the CSS Values and Units Reference.
percentage An integer, followed by a percent (%). A percentage value is relative to the background positioning area.
Examples
Basic list of syntax examples for background-size.
HTML structure of a series of <div> s that are identical except that they have different background-size values applied to the background image.
CSS applied to the HTML example seen above.
Notes
Remarks
An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension. If either of these values is not available, the image’s intrinsic size is used. If the image’s intrinsic size is not available, it is assigned the value of 100%. If both values are auto , use the intrinsic width, height, or both, of the image. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for contain . Negative values are not allowed. In Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.
background — size
Нужно чтобы фоновая картинка заняла всю площадь элемента? Вам нужно это свойство!
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Алёна Батицкая советует
Обновлено 18 января 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство background — size позволяет изменять размер фонового изображения. Если фоновая картинка не совпадает по размеру с размерами блока, то при помощи этого свойства можно сделать так, чтобы она, картинка занимала всю площадь блока или, наоборот, была определённого размера.
Пример
Скопировать ссылку «Пример» Скопировано
Создадим блок и в качестве фона зададим ему красивую панораму:
Если не указывать свойство background — size , то будет видна только небольшая часть картинки. Но хотелось бы, чтобы фон, несмотря на его нестандартный размер, смотрелся хорошо.
Укажем свойство background — size со значением 100 % 100 % . По логике с таким значением фон должен занимать 100% высоты элемента и 100% ширины элемента.
Если у вас широкий монитор, то можно и не заметить подвоха, но на узких мониторах картинка будет деформироваться и сплющиваться по ширине.
Есть способ заставить картинку занять всю доступную площадь и при этом не деформироваться. Зададим background — size : cover — cover переводится с английского как «обложка».
В этой версии ещё добавлено свойство background — position со значением center , чтобы в области видимости был центр изображения.
Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто обрезается. Именно значение cover используется чаще всего для создания красивых фонов.
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство background — size управляет размерами картинки внутри элемента, для которого эта картинка задана фоном.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
В качестве значения для свойства background — size можно задавать:
- Точный размер в любых единицах измерения, доступных в вебе.
- Проценты. Размер в процентах будет рассчитываться от размеров элемента.
- Ключевое слово auto . Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию.
- Ключевое слово cover . Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается.
- Ключевое слово contain . Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.
Размеры в единицах измерения или процентах можно комбинировать с ключевым словом auto . Первое значение будет отвечать за ширину фонового изображения, а второе — за высоту.
Ключевое слово auto в случае комбинации позволяет сохранять пропорции изображения.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение по умолчанию — auto .
�� Значение свойства не наследуется.
�� Чаще всего используется значение cover . Второе по популярности значение — contain . Также часто можно увидеть значение 100 % 100 % , но с ним следует быть аккуратным. Точные размеры фона указываются крайне редко. Не принято оставлять значение по умолчанию.
�� Свойство размера фона можно анимировать при помощи свойства transition ��
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Если для задания фона используется шорткат background , то значение для background — size указывается последним, после слэша / . Пример: background : url ( ‘example . jpg’ ) no — repeat center / cover
�� Свойство background — size очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном.
Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.
Читайте также
Единицы измерения
Кроме пикселей и процентов в CSS есть более экзотичные единицы измерения. Например, сантиметры, градусы и секунды.
CSS background-size Property
The background-size property is used to define the size of the background image.
The background-size property is one of the CSS3 properties.
This property has five values: auto, length, percentages, cover, contain.
Auto sets the background image in its original size. It’s the default value. The length specifies the height and width of the background image. Negative values are invalid. Percentage sets the height and the width of the background-image specified by percentages. Here also the negative values are invalid.
Cover scales the image as large as possible not stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no space remains.
Contain resizes the background image so that the image is fully visible.
There are images, like JPEG, that have intrinsic sizes and proportions, and images, like gradients, that don’t have intrinsic sizes and proportions. Unless otherwise stated, the second ones always take up the size of the background area of an element.
The background-size property also takes comma-separated-values, and when the element has multiple background images, each of the values will be applied to a matching background image. For example, the first value is applied to the first background-image, the second value to the second image, etc..