Css масштабирование изображения: Масштабирование изображений на CSS / Хабр

Масштабирование изображений на 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>

Соответственно, 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, которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство

object-fit, которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height:

.card__img {
  object-fit: cover;
  height: 30vh;
}

В результате получаем следующее:

Когда использовать каждое из решений

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

Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.

Когда следует выбирать background-size:

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

Когда следует выбирать object-fit:

• использование стандартного тега img лучше всего подходит для контекстных изображений, позволяя сохранить семантику

Свойство image-rendering CSS задает алгоритм масштабирования.

Свойство CSS для image-rendering устанавливает алгоритм масштабирования изображения. Свойство применяется к самому элементу, к любым изображениям, установленным в других его свойствах, и к его потомкам.

Try it

Пользовательский агент будет масштабировать изображение, когда автор страницы указывает размеры, отличные от его естественного размера. Масштабирование также может происходить из-за взаимодействия с пользователем (масштабирование). Например, если естественный размер изображения составляет 100×100px , но его фактические размеры составляют 200×200px (или 50×50px ), то изображение будет увеличено (или уменьшено) с использованием алгоритма, заданного параметром image-rendering . Это свойство не влияет на немасштабированные изображения.

Syntax

/ * Значения ключевых слов * /
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/ * Глобальные значения * /
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Values

auto

Алгоритм масштабирования зависит от UA. Начиная с версии 1.9 (Firefox 3.0), Gecko использует билинейную передискретизацию (высокое качество).

smooth Experimental

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

high-quality Experimental

Идентично smooth , но предпочтение отдается более качественному масштабированию. Если системные ресурсы ограничены, изображения с high-quality должны иметь приоритет над изображениями с любым другим значением при рассмотрении того, какие изображения ухудшают качество и в какой степени.

crisp-edges

Изображение масштабируется с помощью алгоритма ближайших соседей.

pixelated

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

smooth . При масштабировании до целого числа, кратного исходному размеру, это будет иметь тот же эффект, что и crisp-edges .

Примечание . Значения optimizeQuality и optimizeSpeed , присутствующие в раннем черновике (и полученные из его эквивалента image-rendering SVG ), определены как синонимы для значений smooth и

pixelated соответственно.

Formal definition

Initial value	auto
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

image-rendering =   auto          |  smooth        |  high-quality  |  pixelated     |  crisp-edges   

Examples

Настройка алгоритмов масштабирования изображений

На практике правила pixelated и crisp-edges можно комбинировать, чтобы обеспечить некоторую альтернативу друг другу. (Просто добавьте фактические правила к

imageSmoothingEnabled . ) Canvas API может предоставить запасное решение для pixelated посредством ручного управления данными изображения или с помощью imageSmoothingEnabled .

CSS

.auto {
  image-rendering: auto;
}
.pixelated {
  image-rendering: pixelated;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

Result

Specifications

Specification
Модуль изображений CSS, уровень 3 # the-image-rendering

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
image-rendering	13	79	3. 6	No	15	6	3	18	4	14	6	1.0
crisp-edges	13	79	65 3.6	No	15	7 6	≤37	18	65 4	14	7 6	1.0
optimizeQuality	28	79	3.6	No	15	7	4.4	28	4	14	7	1.5
optimizeSpeed	28	79	3.6	No	15	7	4.4	28	4	14	7	1. 5
pixelated	41	79	93	No	26	10	41	41	93	26	10	4.0

Примечание. Хотя предполагается, что crisp-edges использует масштабирование пиксельной графики, как в примере спецификации, на практике ни один браузер (по состоянию на январь 2020 г.) этого не делает. В Firefox crisp-edges интерпретируются как ближайший сосед, пикселизация pixelated поддерживается, а auto интерполируется как трилинейная или линейная.

Поведение в Chromium и Safari (WebKit) см. в описании функции GetInterpolationQuality и CSSPrimitiveValue::operator ImageRendering() соответственно.

See also

• Другие изображения , связанные свойства CSS: object-fit , object-position , image-orientation , image-rendering , image-resolution .

---

CSS

• <image>

  Тип данных CSS <image> представляет собой двумерный тип данных <image> может быть представлен одним из следующих способов: CSS может обрабатывать следующие типы данных.

• image-orientation

  CSS-свойство image-orientation задает независимую от макета коррекцию изображения Не применяет никакого дополнительного вращения изображения;оно ориентировано так,как закодировано.

• image-resolution

  Экспериментальный:Эта технологияПеред использованием продукции внимательно проверьте таблицу совместимости браузеров.

• image()

  CSS-функция image() определяет способ, аналогичный url(), но с дополнительными функциями, включая указание направленности изображения, отображение только

• 1
• …
• 559
• 560
• 561
• 562
• 563
• …
• 857
• Next

рендеринга изображений | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство image-rendering определяет, как браузер должен отображать изображение, если оно увеличено или уменьшено по сравнению с исходными размерами. По умолчанию каждый браузер попытается применить псевдоним к этому масштабированному изображению, чтобы предотвратить искажение, но иногда это может быть проблемой, если мы хотим, чтобы изображение сохраняло свою исходную пиксельную форму.

 изображение {
  рендеринг изображения: авто;
  визуализация изображения: четкие края;
  рендеринг изображения: пиксельный;
  /* Похоже, Safari поддерживает, но кажется устаревшим и делает то же самое, что и другие. */
  рендеринг изображений: -webkit-optimize-contrast;
} 

Об этих трех возможных значениях:

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

Это свойство может быть применено к фоновым изображениям, элементам холста , а также встроенным изображениям. Однако важно отметить, что тестирование этих значений в настоящее время особенно запутанно из-за отсутствия последовательной поддержки браузеров.

Пример

Вот очень маленькое встроенное изображение, состоящее из четырех цветных пикселей:

If we change the width of this inline image to 300px then in Chrome (41) we’ll find the Браузер попытался максимально оптимизировать изображение:

Чтобы сохранить его первоначальный пиксельный вид, мы можем использовать следующее значение пикселизированное , например:

 изображение {
  рендеринг изображения: пиксельный;
} 

В результате браузер выбирает альтернативный алгоритм обработки изображения. В этом примере Chrome удалит псевдоним по умолчанию:

К сожалению, после большого количества тестов кажется, что браузеры в настоящее время интерпретируют четкие края и пиксельные значения очень запутанным образом, поэтому важно еще раз отметить, что эта спецификация в самые ранние его дни. Например, Chrome отображает пикселов так же, как Firefox и Safari будут отображать изображения с четкими краями .

Пример QR-кода

Другим вариантом использования этого свойства может быть QR-код, когда вы хотите увеличить его размер, не искажая его, используя стандартное сглаживание. Обязательно проверьте этот пример в полноэкранном режиме, чтобы увидеть растяжение изображения:

Пример переключения

В ручке ниже можно переключаться между этими значениями и видеть различия между браузерами:

Другие ресурсы

• Ряд изображений на MDN
• Ряд изображений на W3C
• Учебник HTML5 Rocks

Browser Support

Crisp-Edges В настоящее время требуется Vendor Prefixes (9000. -Crispes ). чтобы получить наилучшую возможную поддержку.

Рабочий стол

5 908980101

Chrome	Firefox	IE	Edge	Safari
3.6*	11*	79	10

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
111	110	111	10.0-10.2

На момент выпуска этого обновления Firefox 61 поддерживает четких краев , но не пикселей , а Chrome 68 поддерживает пиксельный , но не четкие края .

Адаптивные изображения · Cloudflare Image Optimization docs

Функция srcset HTMLExternal link icon Открытая внешняя ссылка позволяет браузерам автоматически выбирать изображение, которое лучше всего подходит для разрешения экрана пользователя.

srcset требует предоставления нескольких версий каждого изображения с измененным размером, а с изменением размера изображения Cloudflare это легко выполнить.

Есть два разных сценария, в которых полезно использовать srcset :

• Изображения с фиксированным размером в пикселях CSS, но адаптированные к экранам с высоким разрешением (также известным как дисплеи Retina). Эти изображения занимают одинаковое количество места на странице независимо от размера экрана, но они более четкие на дисплеях с высоким разрешением. Это подходит для значков, эскизов и большинства изображений на страницах с макетами фиксированной ширины.
• Адаптивные изображения, которые растягиваются на определенный процент экрана (обычно на всю ширину). Это лучше всего подходит для основных изображений и страниц с плавным макетом, включая страницы, использующие медиа-запросы для адаптации к различным размерам экрана.

srcset для дисплеев с высоким разрешением

Для отображения с высоким разрешением вам нужны две версии каждого изображения. Один для 1x , подходящий для типичных настольных дисплеев (таких как мониторы HD/1080p или недорогие ноутбуки), и один для 2x для дисплеев с высокой плотностью, используемых почти во всех мобильных телефонах, ноутбуках высокого класса и 4K настольные дисплеи. Некоторые мобильные телефоны имеют дисплеи с очень высоким разрешением и могут использовать даже разрешение 3x . Однако при прыжке с 9От 0005 1x до 2x — явное улучшение, при дальнейшем увеличении разрешения отдача уменьшается. Разница между 2x и 3x визуально незначительна, но файлы 3x в два раза больше, чем файлы 2x .

Предположим, что у вас есть изображение product.jpg в папке assets и вы хотите отобразить его в размере 960px , код выглядит следующим образом:

 
  
 src="/cdn-cgi/image/fit=contain,width=960/assets/product.jpg" 
 
 srcset="/cdn-cgi/image/fit=contain,width=1920/assets/product.  jpg 2x" 
 
 /> 
 

В пути URL, используемом в этом примере, атрибут src предназначен для изображений с обычной плотностью «1x». /cdn-cgi/image/ — это специальный путь для изменения размера изображений. За ним следует width=960 , которое изменяет размер изображения до ширины 960 пикселей. /assets/product.jpg — это URL-адрес исходного изображения на сервере.

Атрибут srcset добавляет еще одно изображение с высоким разрешением. Браузер будет автоматически выбирать между изображениями в src и srcset . В этом случае указание width=1920 (два раза по 960 пикселей) и добавление 2x в конце информирует браузер о том, что это изображение с двойной плотностью. Оно будет отображаться в том же размере, что и изображение с разрешением 960 пикселей, но с удвоенным количеством пикселей, благодаря чему оно будет выглядеть в два раза четче на дисплеях с высоким разрешением.

Обратите внимание, что нет смысла масштабировать изображения для использования в srcset . Это только увеличило бы размер файла без улучшения визуального качества. Исходные изображения, которые вы должны использовать с srcset , должны иметь высокое разрешение, чтобы они уменьшались только для дисплеев 1x и отображались как есть или также уменьшались для дисплеев 2x .

srcset для адаптивных изображений

Если вы хотите отобразить изображение, которое занимает определенный процент ширины окна или экрана, оно должно иметь размеры, соответствующие размеру экрана посетителя. Размеры экрана сильно различаются, обычно от 320 до 3840 пикселей, поэтому не существует единого размера изображения, подходящего для всех случаев. С вы можете предложить браузеру несколько возможных размеров и позволить ему выбрать наиболее подходящий размер автоматически.

По умолчанию браузер предполагает, что изображение будет растянуто на всю ширину экрана, и выберет размер, наиболее близкий к размеру экрана посетителя. В атрибуте src браузер выберет любой размер, который является хорошим запасным вариантом для старых браузеров, которые не понимают srcset .

 
  
 ширина="100%" 
 
 srcset=" 
 
 /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, 
 
 /cdn-cgi/image/fit=contain,width=640/assets/hero. jpg 640w, 
 
 /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, 
 
 /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w , 
 
 /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w 
 
 " 
 
 src="/cdn-cgi/image/width=960/assets/hero.jpg" 
 
 /> 
 

В предыдущем случае число после x описано плотность экрана . В этом случае число, за которым следует w , описывает размер изображения . Здесь нет необходимости указывать плотность экрана ( 2x и т. д.), потому что браузер автоматически учитывает ее и при необходимости выбирает изображение с более высоким разрешением.

Если изображение не отображается на всю ширину экрана (или окна браузера), у вас есть два варианта:

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

Атрибут

размеров

Если изображение занимает 50% ширины экрана (или окна):

 
 " /> 
 

Единица vw представляет собой процент от области просмотра (ширина экрана или окна). Если изображение может иметь другой размер в зависимости от медиа-запросов или других свойств CSS, таких как max-width , затем указать все условия в атрибуте размеры :

 
  
 style="max-width: 640px" 
 
 srcset=" 
 
 /cdn-cgi/image/image содержит, ширина = 320/assets/hero. jpg 320w, 
 
 /cdn-cgi/image/fit=contain, ширина=480/assets/hero.jpg 480w, 
 
 /cdn-cgi/image/fit=contain, width=640/assets/hero.jpg 640w, 
 
 /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w 
 
 " 
 
 size="(max-width: 640px) 100vw , 640 пикселей" 
 
 /> 
 

В этом примере размеров говорит о том, что для экранов меньше 640 пикселей изображение отображается на всю ширину области просмотра; на всех больших экранах изображение остается на уровне 640 пикселей. Обратите внимание, что одним из параметров в srcset является 1280 пикселей, поскольку для изображения, отображаемого с разрешением 640 пикселей CSS, может потребоваться в два раза больше пикселей изображения на дисплее с высоким разрешением ( 2x ).

А как насчет других форматов?

srcset полезен для пиксельных форматов, таких как PNG, JPEG и WebP. Это необязательно для векторных изображений SVG.

HTML также поддерживает значок elementВнешняя ссылка Откройте внешнюю ссылку, которая может дополнительно запросить изображение в формате WebP, но вам это не нужно.