Как сделать — Адаптивным изображение
Узнайте, как создать адаптивный изображение с помощью CSS.
Адаптивные изображения будут автоматически корректироваться в соответствии с размером экрана.
Измените размер окна обозревателя, чтобы увидеть ответный эффект:
Создание адаптивных образов
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Если требуется масштабировать изображение как вверх, так и вниз при отклике, задайте для свойства CSS значение width 100% и значение height Auto:
Пример
Если требуется, чтобы изображение было масштабировано, но никогда не масштабируется до размера, превышающего его исходный размер, используйте max-width: 100% :
Пример
Если требуется ограничить адаптивный образ максимальным размером, используйте свойство с выбранным max-width пиксельным значением:
Пример
Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.
Перейдите на наш CSS RWD учебник, чтобы узнать больше о отзывчивый веб-дизайна.
CSS Стилизация изображений
Используйте свойство border-radius для создания округленных изображений:
Пример
Пример
Миниатюрные изображения
Используйте свойство border для создания уменьшенных изображений.
Пример
img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>
<img src=»https://open-source-peace.github.io/w3schoolsrus/images/paris.jpg» alt=»Paris»>
Миниатюрное изображение как ссылка:
Пример
img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>
img:hover <
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
>
Адаптивные изображения
Адаптивные изображения автоматически подстраиваются под размер экрана.
Измените размер окна браузера, чтобы увидеть эффект:
Если вы хотите, чтобы изображение уменьшалось, но оно не должно быть больше исходного размера, добавьте следующее:
Пример
Совет: Узнайте больше об адаптивном веб-дизайне в CSS RWD Учебнике на нашем сайте W3Schools на русском.
Центрировать изображение
Чтобы центрировать изображение, установите для левого и правого поля значение auto и добавьте его в элемент block :
Пример
Polaroid изображения / Карточки
Пример
div.polaroid <
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>
div.container <
text-align: center;
padding: 10px 20px;
>
Прозрачное изображение
Свойство opacity может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:
opacity 1
(по умолчанию)
Примечание: IE8 и более ранние версии используют filter:alpha(opacity=x) . Значение x может принимать значение от 0 до 100. Более низкое значение делает элемент более прозрачным.
Пример
Текст на изображении
Как разместить текст на изображении:
Пример
Фильтры изображений
CSS свойство filter добавляет визуальные эффекты (такие как размытие и насыщенность) к элементу.
Примечание: Свойство filter не поддерживается в Internet Explorer, Edge 12 или Safari 5.1 и более ранних версиях.
Пример
Изменить цвет всех изображений на черно-белый (100% серый):
Совет: Перейдите в наш CSS filter Справочник, чтобы узнать больше о CSS-фильтрах.
Наложение при наведении на изображение
Создать эффект наложения при наведении:
Пример
Исчезновение за текстом:
Пример
Исчезновение за блоком:
Пример
Пример
Пример
Пример
Отразить изображение
Наведите указатель мыши на изображение:
Пример
Адаптивная галерея изображений
CSS можно использовать для создания галерей изображений. В этом примере используются медиа-запросы для переупорядочения изображений на экранах разных размеров. Измените размер окна браузера, чтобы увидеть эффект:
Пример
.responsive <
padding: 0 6px;
float: left;
width: 24.99999%;
>
@media only screen and (max-width: 700px) <
.responsive <
width: 49.99999%;
margin: 6px 0;
>
>
@media only screen and (max-width: 500px) <
.responsive <
width: 100%;
>
>
Совет: Узнайте больше об адаптивном веб-дизайне в CSS RWD Учебнике на нашем сайте W3Schools на русском.
Модальное изображение (дополнительно)
Это пример, демонстрирующий, как CSS и JavaScript могут работать вместе.
Во-первых, используйте CSS, чтобы создать модальное окно (диалоговое окно), и скрыть его по умолчанию.
Затем используйте JavaScript, чтобы показать модальное окно и отобразить изображение внутри модального окна, когда пользователь нажимает на изображение:
Полное руководство по отзывчивым изображениям!
Отзывчивым можно назвать то изображение, размер которого меняется в зависимости от разрешения экрана. Концепция отзывчивых изображений появилась благодаря необходимости решать такие задачи, как, например, показ разных изображений на разных девайсах. И выражается этот подход в том числе в гибком переключении между размерами, типами изображений и прочего. Спецификация отзывчивых изображений была создана только после того, как появился адаптивный дизайн.
Со временем появилось множество способов реализации отзывчивых изображений, расширяя инструментарий фронтенд-разработчиков. Это так же сделало использование отзывчивых изображений довольно сложным. Вот почему я решил погрузится в эту тему только недавно, несмотря на то, что сама технология существует довольно давно. И именно из-за этой сложности я понимал, что в каждом прочитанном мною источнике чего-то не хватает, не показана вся картина (каламбур).
После прочтения и изучения множества источников я решил написать собственное руководство, в котором я, надеюсь, собрал все способы реализации отзывчивых изображений. Здесь собрана вся информация, нужная для понимания этой технологии, что делает эту статью Полным руководством по отзывчивым изображениям.
Короткое введение в экраны повышенной плотности
Перед тем как погрузится во все методы использования отзывчивых изображений нужно разобраться с важной концепцией пикселя в вебе. Мы привыкли думать, что на мобильных девайсах картинки должны быть меньше потому что ширина экрана девайса меньше. Но это не всегда так.
«Пиксель это не пиксель»
Существует разница между разрешением в CSS и разрешением экрана:
- разрешение в CSS предназначено для измерений на нашем сайте;
- разрешение экрана это фактическое количество пикселей на экране.
На сегодняшний день разница между этими понятиями встречается на всех мобильных устройствах и на некоторых экранах компьютеров.
Пример:
Разрешения на Samsung Galaxy S10:
- Разрешение экрана — 1440 на 3040 пикселей
- Разрешения в CSS — 360 на 760 пикселей
- Плотность дисплея — 4х (по 4 физических пикселя на один CSS-пиксель)
Это означает, что если, например, у вас есть место под картинку в 300 пикселей шириной, то вы можете в этом месте загрузить картинку размером в 4 раза больше (1200 пикселей в ширину) и в результате получите действительно более чёткое изображение!
Мы привыкли думать, что на мобильных девайсах картинки должны быть меньше потому что ширина экрана девайса меньше. Но это не всегда так.
Но будьте осторожны: показывая большее изображение вы платите цену. Большие изображения грузятся медленнее, а на мобильных девайсах этот эффект усиливается, поскольку скорость мобильного интернета довольно ограничена. Поэтому вы каждый раз должны взвешивать все «за» и «против» и решать, где чёткость изображения действительно стоит того, чтобы замедлить скорость загрузки страницы.
В этой статье я опишу восемь методов реализации отзывчивого дизайна. Первые два используют элемент <img> с атрибутом srcset ; следующие два используют элемент <picture> ; следующие два используют CSS: в одном применяется атрибут image-set , а в другом используются медиавыражения для отзывчивого дизайна (min-resolution и max-resolution); в последних двух я покажу фичи CSS — функцию image() .
Причина наличия такого большого количества методов в том, что существует несколько проблем, которые призван решать отзывчивый дизайн: показ меньших изображений на меньших экранах; использование преимуществ плотности экранов; изменение фокуса изображений на разных разрешениях; использование типов файлов, которые не поддерживаются всеми браузерами.
Теперь можем перейти непосредственно к методам отзывчивых изображений:
Метод описания плотности экрана
Этот метод подходит для изображений, размер которых фиксирован на экранах повышенной плотности. Это значит, что на некоторых экранах для изображений с размером 200 пикселей в CSS/HTML мы можем загрузить картинку в 600 пикселей — или большего размера— потому что на экранах повышенной плотности оно будет давать лучший визуальный результат.
Для реализации этого подхода мы используем новый атрибут srcset с описанием плотности экрана. Мы пропишем атрибут srcset с набором картинок разного размера и пропишем при какой плотности экрана какая из них должна показываться. Идентификатор плотности экрана указывает какая должна быть плотность дисплея для показа каждой из картинок: 1x , 2x , 4x и так далее.
Внимание! Идентификатор плотности экрана будет выбирать картинку в зависимости от плотности пикселей, а не от фактического размера изображения.
Рекомендуется по прежнему использовать стандартный атрибут src для фоллбэка в браузерах, не поддерживающих srcset (IE и Opera mini).
Метод описания ширины и атрибут sizes
Этот метод подходит для изображений, ширина которых изменяется в зависимости от размера области просмотра и точками останова. Этот приём наиболее распространен на адаптивных сайтах.
Атрибут srcset с описанием ширины
В этом методе мы прописываем атрибут srcset с набором картинок и указанием, на каких ширинах каждая из них должна показываться (мы должны указывать ширину потому что браузер не «знает» фактический размер картинки). В случаях, когда этот подход используется без атрибута sizes он опирается на предположениях браузера, что ширина картинки должна заполнять ширину области просмотра.
Этот метод немного напоминает тот, что мы обсудили выше, с описанием плотности экрана, в котором мы тоже использовали атрибут srcset с набором картинок и условиями их показа. Но они отличаются тем, что теперь мы будем определять какую картинку показывать в зависимости от её ширины, а не от плотности экрана. То есть мы используем описание ширина (ширины картинки, которая нам необходима), но не описываем плотность экрана. Но эти понятия связаны для экранов с повышенной плотностью.
Примечание: даже при условии, что мы описываем ширину, а не плотность экрана, браузер всё равно принимает во внимание экраны повышенной плотности.
Атрибут sizes
Помимо описания списка изображений с уточнением ширины (используя атрибут srcset ) мы должны предоставить браузеру соотношение размера картинки к экрану браузера. И для этого нам пригодится атрибут sizes .
Атрибут sizes это набор медиавыражений с размерами картинки для каждого условия. (Примечание: количество медиавыражений не обязательно должно быть равно количеству картинок, как вы увидите в следующем примере). В конце списка мы должны указать значение ширины без медиавыражения в качестве фоллбэка.
Условие размера картинки — тут есть 3 варианта: единицы vw , единицы px и комбинация этих единиц с применением функции calc() . Например, calc(30vw + 300px) .
Пример со сложным условием:
На простом адаптивном сайте размеры обычно имеют только одно условие и фоллбэк, а в srcset будут указаны несколько комбинаций размеров и ширин изображения:
После того, как вы отдали браузеру массив картинок и настоящий размер картинок в CSS при помощи медиавыражений, браузер выберет нужную картинку с учётом всех этих условий. И не беспокойтесь, на экранах повышенной плотности браузер при выборе картинки будет опираться на реальное соотношение пикселей на устройстве.
Элемент <picture>
До сих пор мы говорили только об элементе <img> и в большинстве случаев этого будет достаточно потому что элемент <img> с атрибутами srcset и sizes покроет большую часть задач. Но элемент <picture> даёт дополнительные возможности для реализации отзывчивых изображений. В следующих двух методах пойдёт речь о более сложных случаях:
Метод с <picture> для изменения направления изображения
Метод изменения направления это способ показывать картинки с разными соотношениями сторон или с разными точками фокуса на разных девайсах. Внутри элемента <picture> мы можем загружать картинки с разных путей в зависимости от CSS ширины экрана устройства. Таким образом вы можете выбирать одно и то же изображение, но нарезанное по-разному, и тем самым фокусироваться на важной части изображения на небольших экранах.
Как работает метод изменения направления?
Внутри элемента <picture> мы используем элемент <source> . В каждом элементе <source> мы прописываем два атрибута: media и srcset . Значением атрибута media является медиавыражение. Точно такое же как обычное медиавыражение. И для каждого медиавыражения определяется атрибут srcset .
Мы можем прописать столько элементов <source> , сколько нам нужно.
После всех элементов <source> мы указываем обычный элемент <img> . Это важный момент потому что без элемента <img> вся конструкция работать не будет. Кроме того для добавления <img> есть ещё несколько важных причин:
- Если браузер не поддерживает <picture> , то будет использован элемент <img> (например, в случаях IE и Opera mini).
- Если ни один из элементов <source> не подошёл по условиям, то браузер использует элемент <img> .
- Атрибут alt для обеспечения доступности можно добавить только на элемент <img> .
Важен так же и порядок указания элементов <source> . Браузер выберет первый источник, который сработает. Ниже иллюстрация того, как это всё работает:
Полный HTML пример:
Известный пример с Котиком от Google. Они сделали его, когда поддержка элемента <picture> появилась в Chrome ��
Метод с использованием <picture> для разных типов файлов
Другая ситуация, в которой очень пригодится элемент <picture> — использование типов файлов с изображениями, которые не поддерживаются всеми браузерами. Например, Google создал новый тип файлов со сжатыми изображениями, который называется webp. Webp не поддерживается всеми браузерами. Например, Safari и IE. И снова элемент <picture> спасёт нас, но в другой конфигурации.
В этой ситуации мы используем новый атрибут type у элемента <source> . Каждый атрибут type будет указывать на разные изображения в комбинации с атрибутом srcset . Ровно как в примерах выше порядок элементов <source> важен. Браузер выберет первый работающий вариант. Если ни один из вариантов не работает, то браузер использует элемент <img> в качестве фоллбэка. Посмотрите иллюстрацию:
В недавнем прошлом SVG не работало в старых версиях IE. И вот такая ситуация с тремя вариантами типов файлов встречалась довольно часто.
Существует большое количество типов изображений и вы можете найти распространённые случаи использования на сайте Mozilla или заглянуть в полный список типов.
Отзывчивые картинки в CSS
До сих пор мы изучали методы реализации отзывчивых изображений при помощи HTML. Для многих задач этого более чем достаточно, но существует для способа реализации отзывчивых изображений при помощи CSS, с которыми вам стоит ознакомиться.
Функция image-set
Параметрами функции image-set являются пары картинок и плотностей. Точно так же как мы указывали это в атрибуте srcset в методе описания плотности экранов. Браузер выберет то изображение, которое соответствует текущему экрану.
Примечание: image-set появилась раньше, чем srcset и не обновлялся. И в нём отсутствует возможность указания ширины. Поэтому браузер выбирает изображения только опираясь на плотность экрана, но не на актуальный размер картинки!
Браузерная поддержка image-set
Складывается ощущение, что все просто забыли про эту функцию — некоторые браузеры вообще её не поддерживают, для некоторых нужно указывать префикс -webkit . Для максимального покрытия всех возможных браузеров используйте эту функцию так, как указанно в примере ниже:
Медиавыражения для определения плотности экрана
Существует два значения медиавыражений, пригодных для адаптивного дизайна: min-resolution и max-resolution. Они также как и image-set , подходят для случаев, когда вы хотите показывать разные изображения в зависимости от плотности экрана устройства. Разница между этими двумя методами в том, что здесь вы можете использовать абсолютно любые стили.
Примечание: Safari до сих пор использует старый синтаксис с префиксом: -webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio . Для поддержки всех браузеров вам нужно указывать оба варианта. Пример:
Ожидаемые фичи для отзывчивых изображений
Направление изображения при помощи CSS-функции image()
Как мы видели в методе изменения направления существуют кейсы, в которых мы хотим нарезать изображения по-разному в зависимости от размера области просмотра. В противовес этому методу, использующемуся в HTML, существует спецификация, позволяющая делать это же при помощи CSS!
Эта возможность реализована при помощи функции image() . Её параметрами являются url картинки и четыре цифры: начальная позиция по оси X, начальная позиция по оси Y, ширина и высота.
И если в методе с использованием HTML-метода мы должны указывать разные изображения, то в текущем варианте мы можем использовать одно и тоже изображение, но нарезать его так, как нам нужно, применяя CSS-функцию image() .
CSS для типов картинок
Как мы уже видели раньше, существуют ситуации, в которых мы должны подгружать разны типы файлов с изображениями в зависимости от поддержки в конкретном браузере. Для этой возможности тоже существует спецификация CSS. И в ней так же используется функция image() , но с немного другим синтаксисом. Мы можем указать внутри функции набор изображений и браузер будет рассматривать их в том порядке, в котором они написаны, и использует первый файл, который сработает.
К сожалению, в данный момент у этой фичи нулевая поддержка. Вы можете найти больше информации на сайте Mozilla.
Заключение
Вот и всё.
Я надеюсь, что вы насладились чтением этой статьи и узнали что-то новое. Если вам понравился этот пост, то я буду очень благодарен за аплодисменты и шеринг 🙂
Кто я?
Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Вы можете найти меня в группах на Facebook:
CSS Masters
CSS Masters Israel
Как в html сделать так чтобы картинка адаптировалась под размер экрана
Адаптивные изображения — стандарт для современных сайтов. Его поддерживают все браузеры, кроме Internet Explorer и Opera Mini, а Google прямо рекомендует использовать эту технологию. Но иногда у верстальщиков и SEO-специалистов возникают трудности с корректным внедрением атрибута srcset, что приводит, например, к неправильной индексации картинок поисковыми роботами.
В этой статье обсудим, как работают адаптивные изображения, почему браузер выбирает именно такую версию картинки, а не любую другую и как грамотно задать условия в sizes.
Мы сделали фотографию и хотим опубликовать ее в блоге. Фото шириной 5130px весит 3Мб. PageSpeed Insights отнимет у нас попугаев, если выложить его как есть.
Можно сократить ширину иллюстрации и опубликовать ее в уменьшенном виде. Но тогда наше фото как пользователи, так и поисковые роботы увидят в сжатом качестве.
Cделаем умнее: нарежем иллюстрацию на несколько копий и предложим браузеру выбрать нужную.
Теперь Chrome не будет загружать три мегабайта, когда пользователь заходит с iPhone SE с шириной экранчика 320px.
Многие статьи по адаптивным изображениям на SEO-ресурсах заканчиваются где-то на этом моменте. Кто-то еще про sizes коротко рассказывает, мол, разберетесь. Из-за этого ни оптимизаторы, ни верстальщики зачастую не понимают, что вообще у себя на сайте внедряют. Углубимся в теорию.
В этом весь фокус. Число физических (реальных) пикселей равно числу CSS-пикселей, умноженному на соотношение пикселей (pixel ratio).
Век экранов, у которых число реальных и CSS-пикселей совпадает, давно кончился. Помните, когда-то Apple революционно вышла на рынок с ретина-дисплеями? Это когда pixel ratio — 2. На Samsung Galaxy S6 2015 года соотношение физических пикселей к CSS-пикселям 4! Большинство китайских смартфонов сегодня — это pixel ratio 2-3.
А значит, если у нас на мобилке картинка занимает 360px, нет смысла загружать иллюстрацию шириной меньше, чем 360×2=720px! А обладатель корейского флагмана был бы не против и все 1440px загрузить.
В общих словах алгоритм такой: сначала браузер определяет ширину иллюстрации, которую та занимает в верстке (CSS-пиксели). Затем умножает это значение на pixel ratio устройства и получает реальную ширину — ровно такую картинку надо загрузить на устройство, чтобы пользователь увидел изображение в максимальном качестве.
Далее браузер идет в массив srcset, где ищет подходящую картинку. Например, идеальной была бы ширина 1032px, но есть только 1200px и 960px. Браузер возьмет 1200px, так как это подходящее значение (обычно браузер берет первое изображение, которое больше размера выбранного слота).
На демо-странице #1 вы можете потестировать, как браузер выбирает иллюстрацию при изменении pixel ratio устройства. Ширина картинки равна 360px и не зависит от device-width.
Основная иллюстрация ушла в src, в srcset я указал копии шириной 360px, 720px, 1080px, 1920px. На атрибут sizes пока не обращайте внимания.
Отмечу, что вместо px в srcset используется w — дескриптор ширины. Это очень удобно, если запомнить, что w — это реальные пиксели, а px — CSS-пиксели, и тогда работа srcset/sizes станет еще понятнее.
Вместо дескриптора ширины (w) может использоваться дескриптор плотности пикселей (x), когда мы говорим браузеру, что вот эта картинка для обычных устройств, а эта — для ретина-дисплеев. Но встречаю я такое редко, так что вернемся к нашей иллюстрации на демо-странице.
А теперь перейдите на демо-страницу #2. На ней все то же самое, однако в теге img нет атрибута sizes. Для смартфона с device-width 360px и DRP 3.0 по-прежнему загружается иллюстрация на 1080px, однако для десктопа 1920x1080px — уже, почему-то, версия на 1920px.
Картинка по-прежнему занимает 360 CSS-пикселей, device pixel ratio по-прежнему 3, однако браузер почему-то грузит слишком большую картинку. Причина — в отсутствии атрибута sizes. Если он не заполнен, то по умолчанию используется значение 100vw. То есть браузер считает, что такая картинка занимает 100% device width.
Так как мы загружаем страницу с шириной экрана 1920px, браузер полагает, что и картинка с песиком занимает 1920px в ширину, а значит, надо скачивать самую большую иллюстрацию из массива srcset.
При первичной калькуляции браузер не знает ширину изображения в верстке страницы. Чтобы понять размер картинки в CSS-пикселях, браузер изучает значение атрибута sizes.
Теперь мы можем полностью описать алгоритм работы с отзывчивыми изображениями:
В примере браузер считает такую информацию: если device-width меньше или равен 560px, то картинка занимает 100% viewport, иначе — 560px. Когда пользователь зайдет на страницу с iPhone 8, то условие будет истинно и браузер поймет, что иллюстрация занимает 375 css-пикселей. А если человек загружает страницу с десктопа, то условие будет ложным, и браузер выберет второе значение — 560px.
Кстати, обратите внимание, что max-width — это именно меньше или равно. Некоторые верстальщики из-за этого совершают ошибку, когда описывают в sizes якорные значения, при которых состояние картинки уже изменилось.
В большинстве случаев достаточно последовательного использования max-width, но можно конструировать условия любой сложности.
При этом описывать состояние картинки при текущем медиа-запросе можно как с помощью CSS-пикселей (px), так и с помощью vw — доли области просмотра в %.
Пример с NYTimes. Если device-width от 600px до 1004px включительно (планшет), то иллюстрация занимает 84%, если больше 1005px включительно (десктоп), то 60%, в иных случаях (смартфоны) — 100% viewport.
В качестве значения при медиа-запросе можно использовать и более сложные материи, например calc. Ниже пример sizes с одного из сайтов. В нем полностью описывается состояние иллюстрации при изменении device-width: например, если ширина экрана 1024px, то иллюстрация занимает (100% viewport — 504px) = 520px. Для этого используется calc.
Деталь: в sizes можно одновременно использовать и vw, и px, тогда как в srcset используется дескриптор либо ширины (w), либо плотности (x).
Строго говоря, степень детализации sizes зависит только от дотошности верстальщика — если у вас создается всего две копии изображения шириной 640px и 1200px, то проще будет в sizes описать не реальные состояния верстки, а условия, при которых мы приказываем браузеру брать либо первое фото, либо второе.
Прежде всего, попросите этим заняться верстальщика. Ситуация, при которой SEO-специалист описывает медиа-запросы, — скорее вынужденная, html-кодом должны заниматься профессионалы.
Но если по-другому никак, то вооружайтесь Chrome DevTools и скромными математическими познаниями — большего не понадобится. Для примера я вместе с вами сформирую sizes для популярного российского новостного сайта.
Наша задача — описать состояния основной иллюстрации в зависимости от ширины экрана пользователя. Сколько картинка занимает в верстке, если человек заходит с телефона? А если с планшета? И так далее.
Заходим в DevTools и выставляем начальное значение девайса: Responsive, 320px. Кликаем правой клавишей по иллюстрации, которая нас интересует, и выбираем пункт «Просмотреть код». В панели разработчика появится html-код, центрированный на нашем изображении. Наводим курсор на <img>, после чего браузер подсветит текущие размеры иллюстрации.
При ширине экрана 320px иллюстрация занимает 280px. Записываем и идем дальше, возьмем 360px. Теперь картинка занимает 320px. Чувствуете зависимость? По бокам от картинки — белые поля шириной 20px каждое, так что описать состояние иллюстрации можно формулой: calc (100vw — 40px).
Но как долго действует эта зависимость? Проще всего это выяснить, растягивая ширину нашего виртуального девайса. Выясняется, что где-то в районе 536px поля вокруг картинки увеличиваются. Находим точное значение — это 540px. При ширине девайса 541px, картинка по-прежнему занимает 500px, а не 501px, как мы планировали.