Масштабирование изображений на CSS / Хабр
Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был «Царём горы», наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
background-size: cover;
Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
object-fit: cover;
Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
Использование
background-size: coverВ течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.
Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style. Рекомендуется использовать aria-label, который заменит атрибут alt, присутствующий в тегах img.
<article>
<div aria-label="Preview of Whizzbang Widget"></div>
<div>
<h4>Whizzbang Widget SuperDeluxe</h4>
<p>
Liquorice candy macaroon soufflé jelly cake.
Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#">Add to Cart</a>
</div>
</article>
Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#">Add to Cart</a>
</div>
</article>Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom, позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:
.card__img {
background-size: cover;
background-position: center;
/* Соотношение сторон 16:9 */
padding-bottom: 62.5%;
}Всё вместе это будет выглядеть следующим образом:
Использование
object-fit: coverЭто новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16
Это свойство применяется непосредственно к тегу img, поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img
aria-label на alt:<article> <img alt="Preview of Whizzbang Widget" src="https://placeimg.
com/320/240/tech"/>
<div>
<h4>Whizzbang Widget SuperDeluxe</h4>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#">Add to Cart</a>
</div>
</article>Затем CSS-код дополняется свойством height, которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство height:
.card__img {
object-fit: cover;
height: 30vh;
}В результате получаем следующее:
Когда использовать каждое из решений
Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).
Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.
Когда следует выбирать background-size:
- при использовании с контейнером, в котором предполагается размещать какое-то содержимое. Например, с шапкой сайта
- если необходимо применить дополнительные эффекты с помощью псевдоэлементов, которые нельзя использовать с тегом
img - если изображение носит декоративный характер и не потребности в семантике тега
img
Когда следует выбирать object-fit:
- использование стандартного тега
Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS | by Рома Зварич
3 min read·
Jul 24, 2020Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был “Царём горы”, наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
background-size: cover;
Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
object-fit: cover;
Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress.
Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.
Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style. Рекомендуется использовать aria-label, который заменит атрибут alt, присутствующий в тегах img.
<article>
<div aria-label="Preview of Whizzbang Widget"></div>
<div>
<h4>Whizzbang Widget SuperDeluxe</h4>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#">Add to Cart</a>
</div>
</article>
Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom, позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:
.
background-size: cover;
background-position: center; /* Соотношение сторон 16:9 */
padding-bottom: 62.5%;
}
card__img {Всё вместе это будет выглядеть следующим образом:
Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16
Это свойство применяется непосредственно к тегу img, поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt:
<article>
<img alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/>
<div>
<h4>Whizzbang Widget SuperDeluxe</h4>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#">Add to Cart</a>
</div>
</article>
Затем CSS-код дополняется свойством height, которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон.
Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit, которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height:
.card__img {
object-fit: cover;
height: 30vh;
}В результате получаем следующее:
Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).
Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.
Когда следует выбирать background-size:
- при использовании с контейнером, в котором предполагается размещать какое-то содержимое. Например, с шапкой сайта
- если необходимо применить дополнительные эффекты с помощью псевдоэлементов, которые нельзя использовать с тегом
img - если изображение носит декоративный характер и не потребности в семантике тега
img
Когда следует выбирать object-fit:
- использование стандартного тега
imgлучше всего подходит для контекстных изображений, позволяя сохранить семантику
Свойство CSS Background-Size — Темы масштабирования
Обзор
- CSS-свойство background-size определяет размер фонового изображения. Фоновое изображение можно растянуть или ограничить, чтобы оно соответствовало доступному пространству. По сути, это дает нам возможность изменять масштабирование фонового изображения.
- CSS-свойство background-size — одно из самых полезных свойств CSS. Этот атрибут имеет множество вариаций и синтаксисов, каждый из которых имеет свой собственный набор вариантов использования. Это свойство поддерживает четыре синтаксиса: синтаксис ключевого слова, синтаксис с одним значением, синтаксис с двумя значениями и синтаксис с несколькими фонами.
Фоновое изображение можно растянуть или ограничить, чтобы оно соответствовало доступному пространству. По сути, это дает нам возможность изменять масштабирование фонового изображения.Синтаксис размера фона CSS
Свойство CSS background-size можно определить одним из следующих способов:
- Используя значения ключевого слова как «авто», «обложка» или «содержать».
- Одно значение — Если вы просто указываете одно значение (например, размер фона: 500 пикселей), оно учитывает ширину и автоматически устанавливает высоту. Вы можете использовать любые единицы размера CSS, такие как пиксели, проценты, ems, единицы области просмотра и т.д.
- Два значения — Использование значения ширины и высоты, где первое определяет ширину, а второе — высоту. Каждое значение может иметь тип
, или auto. - Несколько фонов — Вы также можете комбинировать любой из вышеперечисленных способов и применять их к нескольким изображениям, разделяя каждый синтаксис запятыми.
Примечание: Чтобы указать размер нескольких фоновых изображений, используйте запятую для разделения значений.
Фон в CSS
- Размер фонового изображения для элемента можно указать с помощью свойства CSS background-size. Свойство background-size можно использовать для сжатия или растяжения изображения, чтобы оно соответствовало ограниченному пространству. В общем, это позволяет нам регулировать размер фонового изображения.
- Этот атрибут может иметь значения длины, процента или ключевого слова. Он может иметь два значения ключевого слова: contains и cover. Его синтаксис с одним значением определяет ширину изображения (в данном случае для высоты задано значение auto), но двойные значения определяют значение как высоты, так и ширины, причем первое значение задает ширину, а второе — высоту.
- Если элемент содержит много фоновых изображений, мы можем использовать значения, разделенные запятыми, чтобы указать размеры каждого из них.
- Значение покрытия свойства CSS background-size используется для покрытия всей фоновой области элемента. С другой стороны, значение содержимого этого свойства максимально масштабирует изображение, не обрезая его.
Его синтаксис с одним значением определяет ширину изображения (в данном случае для высоты задано значение auto), но двойные значения определяют значение как высоты, так и ширины, причем первое значение задает ширину, а второе — высоту.а. Значение по умолчанию размера фона CSS
| Атрибут | Описание |
|---|---|
| авто | Значение по умолчанию — авто. |
б. Значения свойства размера фона CSS
| Атрибут | Описание |
|---|---|
| Содержит | Это свойство используется для масштабирования изображения до максимально возможного размера в пределах его контейнер, не обрезая и не растягивая его, и изменяет размер фонового изображения, чтобы изображение полностью виден. Мозаика изображения будет происходить, если контейнер больше, чем изображение, если для атрибута background-repeat не установлено значение no-repeat. |
| Обложка | Это свойство используется для масштабирования изображения (с сохранением пропорций) до наименьшего возможного размера, чтобы заполнить контейнер (то есть его высота и ширина полностью покрывают контейнер), оставляя нет пустого места. Если пропорции фона и элемента различаются, изображение обрезается по вертикали или по горизонтали. |
| Авто | Это значение по умолчанию, которое представляет фоновое изображение в исходном размере. |
| | Используется для указания ширины и высоты фонового изображения. Это значение растягивает изображение в эквивалентном измерении предоставленной длины. Его единственное значение указывает ширину изображения, а для высоты установлено значение auto. Если указаны два значения, первое определяет ширину, а второе — высоту. |
| <процент> | Это свойство растягивает изображение на указанный % области позиционирования фона в соответствующем измерении. Значение происхождения фона определяет область позиционирования фона (по умолчанию поле заполнения). Если значение background-attachment фиксировано, область позиционирования представляет собой всю область просмотра. Отрицательные значения не допускаются. |
| начальный | Восстанавливает значение свойства по умолчанию. |
| наследовать | Он наследует свойство от своего родительского элемента. |
Внутренние размеры и пропорции размера фона CSS
Вычисление значений зависит от внутренних размеров (ширины и высоты) и внутренних пропорций изображения (отношение ширины к высоте). Эти свойства следующие :
- Растровое изображение (например, JPG) всегда имеет собственные пропорции и собственный размер.
- Не обязательно, чтобы векторное изображение (например, SVG) всегда имело внутренние размеры. Он содержит внутренние пропорции, если у него есть как вертикальные, так и горизонтальные внутренние размеры. У него могут быть пропорции, а может и не быть, если у него нет измерений или просто одно измерение.
- CSS <градиент> не имеет внутренних пропорций или внутренних размеров.
- Внутренние пропорции и размеры производящего элемента используются для создания фоновых изображений с помощью функции element().
Визуализированный размер фонового изображения определяется с использованием внутренних пропорций и размеров следующим образом :
- Указанный размер фонового изображения визуализируется, если оба компонента размера фона указаны и не установлены автоматически.
- Если CSS-свойство background-size содержится или перекрывается: изображение визуализируется с максимальным размером, содержащимся внутри или покрывающим область позиционирования фона, при сохранении его внутренних пропорций. Если у изображения отсутствуют внутренние размеры, оно отображается с размером фоновой области позиционирования.
- Если размер фона установлен на авто или авто авто :
Если у изображения отсутствуют внутренние размеры, оно отображается с размером фоновой области позиционирования.| Футляры | Описание |
|---|---|
| 1. | Изображение рендерится в размере указывается, если он имеет как горизонтальные, так и вертикальные внутренние размеры. |
| 2. | Изображение визуализируется с размером области позиционирования фона, если оно не имеет внутренних размеров или пропорций. |
| 3. | Если изображение имеет внутренние пропорции, но не имеет внутренних размеров, оно представляется так, как если бы вместо него было указано «содержит». |
| 4. | Если изображение имеет внутренние пропорции и только одно внутреннее измерение, оно отображается с размером, соответствующим этому одному измерению. Затем указанный параметр и внутренние пропорции используются для расчета другого параметра. |
| 5. | Если изображение не имеет внутренних пропорций, а имеет только одно внутреннее измерение, оно визуализируется с указанным размером плюс другое измерение области позиционирования фона. |
- Если размер фона имеет один автоматический компонент и один неавтоматический компонент:
| Чехлы | Описание |
|---|---|
| 1. | Изображение растянуто до указанного размерность, если она имеет присущие пропорции. Указанное измерение и внутренние пропорции используются для вычисления неуказанного измерения. |
| 2. | Если у изображения отсутствуют собственные размеры, оно растягивается до нужного размера. Если изображение имеет внутреннее измерение, оно используется для вычисления неопределенного измерения. Если такого внутреннего размера не существует, он становится соответствующим размером фоновой области позиционирования. |
Примечание: Размер фона еще не полностью реализован во всех браузерах для векторных изображений, у которых отсутствуют собственные размеры или пропорции. Будьте осторожны, полагаясь на поведение, описанное выше, и протестируйте его в различных браузерах, чтобы убедиться в удовлетворительных результатах.
Работа с градиентами
- Если вы используете <градиент> в качестве фона и создаете для него размер фона, избегайте выбора размера, который использует один автоматический компонент или предоставляется с использованием только значения ширины (для например, размер фона: 50% ). В таких случаях рендеринг <градиента> меняется в Firefox 8 и теперь часто несовместим в разных браузерах, поскольку не все реализуют рендеринг в полном соответствии со спецификацией CSS3 background-size и спецификациями градиента CSS3 Image Values.
- Особенно не рекомендуется использовать размер в пикселях и автоматический размер с <градиентом>, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, которые не поддерживают рендеринг Firefox 8, не зная точного размер элемента, фон которого указывается.
Примеры размера фона CSS
Мозаика большого изображения
Рассмотрим маленькое изображение логотипа Google (193×197). Это изображение будет четыре раза совмещено с элементом размером 300×300 пикселей. Мы можем добиться этого, используя фиксированное значение размера фона, равное 150 пикселям.
Вывод вышеуказанного кода:
Использование глобальных значений
Вывод вышеуказанного кода:
Использование нескольких фонов
Вывод вышеуказанного кода:
Использование значений ключевых слов
Вывод приведенный выше код:
Использование числовых и процентных значений
Вывод приведенного выше кода:
Поддержка браузера
CSS-свойство background-size поддерживается следующими браузерами:
| Браузер | Google Chrome | Internet Explorer | Microsoft Edge | Firefox | Opera | Safari | 9 0058
|---|---|---|---|---|---|---|
| Поддержка версий | Да | Да | Да | Да | Загрузить 4,0+10,5+ | 4. 1+ |
Заключение
- Изображения, используемые в качестве фона для элементов, отображаются в полном размере в пикселях. Например, если размер файла изображения, используемого для фона, составляет 800 x 600 пикселей, а размер элемента, к которому он применяется, – 400 x 300 пикселей, то для решения этой проблемы будет отображаться только 25 % фонового изображения. Используется свойство CSS background-size.
- Вы можете использовать свойство CSS background-size, чтобы масштабировать фоновое изображение, чтобы оно было полностью видимым внутри элемента с содержащимся значением.
- Свойство фона CSS указывает начальное положение фонового изображения элемента. Это сокращение для атрибутов CSS, таких как background-color, background-image, background-repeat, background-attachment, background-position и т. д.
- CSS-свойство background-size используется для указания размера фонового изображения. Изображение может быть расположено слева от исходного размера, растянуто или ограничено, чтобы соответствовать доступному пространству.
- фоновая позиция
- фон-происхождение
- фон-клип
- фон-вложение
- подходит для объекта
Масштабирование фонового изображения CSS | Фрагмент кода
Если вы хотите разместить любое изображение на заднем плане, это довольно просто. Если вы хотите сфокусироваться на какой-то точке изображения, которая немного усложняет код CSS. Если вы хотите манипулировать размером, это более сложно. Учитывая, что ни одно изображение не может соответствовать всем размерам экрана.
Рассмотрим случай изменения размера фонового изображения в теле (во весь экран) и внутри контейнера.
Чтобы понять размер, мы всегда будем брать положение изображения в качестве центра. Это можно изменить в зависимости от изображения.
Установка размера фона в полноэкранном окне.
Мы сделаем тело 100%, чтобы мы могли использовать изображение. Вот как выглядит базовый HTML:
<голова> <тело>
Часть стиля будет иметь только сброс HTML и основного текста, а также фоновое изображение с центральным положением и без повторений:
HTML, тело {
высота: 100%;
маржа: 0;
заполнение: 0;
}
тело{
фон: url(earhy-lady. jpg) центр без повторов;
} 
jpg) центр без повторов;
} Это просто выведет изображение в теле. Не очень убедительно, верно?
Пример редактирования
Это связано с тем, что фоновое изображение имеет масштаб по умолчанию. Мы можем захотеть изменить его размер, чтобы он выглядел хорошо, по крайней мере, на рабочем столе. Вот как это выглядит после использования размера фона.
/* Изображение будет увеличено до полной ширины */
тело{
размер фона: обложка;
}
Редактировать пример
Мы можем подогнать его под высоту, изменив код следующим образом:
/* Это изменит размер изображения до полной высоты */
тело{
размер фона: содержит;
} Пример редактирования
Использование полноразмерных или полноразмерных изображений не является идеальным. Это идеально подходит для фоновых изображений, где можно обрезать изображение в некоторых точках.
Мы можем установить свойство background-position в то место, где мы хотим установить фокус при изменении размера области просмотра.
Фиксированный и процентный размер фонового изображения:
Фоновый размер может иметь фиксированный или процентный размер. Это позволит растянуть изображение. Любите это, ненавидьте это, есть метод, чтобы нарушить соотношение сторон, если вы хотите его использовать. Это не всегда хорошо выглядит.
Мы просто попробуем управлять шириной фона, чтобы продемонстрировать, как это работает. Это нарушит соотношение сторон.
/* Это изменит размер изображения на 400 пикселей по оси x и на 200 пикселей по оси y */
тело{
размер фона: 400 пикселей 200 пикселей;
} Пример редактирования
Это можно сделать как по оси X, так и по оси Y.
/* Это изменит размер изображения на 400 пикселей по оси Y и на 200 пикселей по оси X */
тело{
размер фона: 200 пикселей 400 пикселей;
} Пример редактирования
Что, если мы хотим изменить размер фонового изображения внутри контейнера?
Все методы, которые применимы к телу, глобально применимы для любого элемента, например набора логотипов.
Возможно, нам придется использовать размер в процентах, чтобы изображения, такие как логотипы, не обрезались из-за размера фона.
Основное правило изменения размера изображения выглядит так:
/* Настройка базовой сетки */
.logo-контейнер{
дисплей: сетка;
сетка-столбец-шаблон: 1fr 1fr;
зазор сетки: 10px;
}
.лого {
размер фона: авто 70%;
} Этот размер подойдет, учитывая, что большинство логотипов имеют прямоугольное соотношение. Лужи с портретным размером будут обрезаны из-за размера в направлении x.
Пример редактирования
Для большего количества портретных изображений нам просто нужно использовать лучший размер фона. Высота будет больше 70%, чтобы в поле было полное изображение.
.лого{
размер фона: 70% авто;
} Это приведет к следующему результату.
Пример редактирования
Фото Саджада Нори, Омида Армина на Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE
Подойдут ли эти размеры для адаптивных макетов?
ответ зависит.
