Адаптивные изображения с помощью CSS. Как сделать картинку адаптивной Как адаптировать изображение

Всем привет. Задержался я с новой статьей (устроил себе несколько дней выходных и уехал на море). Но надеюсь, что этой статьей немного заглажу этот инцидент:)

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

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

Wrapper img{ width: 100%; }

И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения 2048x1536px ?

Если вы не используете svg и это растровое изображение, то первое, что приходит на ум, — это взять картинку, которая подходила бы к максимальному разрешению landing page, а уже с изменением размера окна браузера, она будет сжиматься с нормальным качеством.

И тогда возникает проблема производительности. Глупо для смартфона подгружать такие большие картинки, которые хорошо смотрятся на retina разрешении. Ведь скорость мобильных сетей не такая высокая, как у ПК, и некоторые пользователи могут не дождаться загрузки лендинга на своем смартфоне. А в результате — это потерянный клиент.

Можно попробовать задать несколько дивов с картинками, а потом, при помощи медиазапросов, скрывать ненужные и показывать только ту картинку, которая подходит под текущее разрешение.

Вроде бы проблема решена. Но дело в том, что браузеры, для того, чтобы ускорить отображение страницы предзагружают картинки, которые прописаны в html до того, как начнет обрабатываться css. Может я не совсем правильно выразился (поправьте), но если провернуть такой трюк, то все картинки все равно будут загружены, вне зависимости от того, что прописано в css. А значит мы только усугубили положение для мобильных устройств. Теперь им придется грузить не одно, а несколько изображений.

В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку «Сеть».

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

В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:

Особенность в том, что вместо src — используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.

Ознакомиться с поддержкой браузерами тега picture на текущий момент можно на этой странице .

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

Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE — не жалко, они должны страдать:)). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория:)

Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill.js .

Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).

В отличии от способа, описанного выше, сейчас грузится только одна картинка, а не три, как это было раньше.

Вот такой не хитрый способ. А как вы делаете адаптивными изображения? Поделитесь пожалуйста своими методами в комментариях. Спасибо.

Статья, в которой познакомимся с классами фреймворка Bootstrap 3 и 4 для оформления изображений.

Что такое адаптивное изображение?

Адаптивное изображение - это изображение, которое подстраивается под ширину элемента, в котором оно расположено.

Т.е. оно отвечает следующим условиям:

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

Как сделать изображение адаптивным

Придание изображению адаптивности осуществляется:

• в Bootstrap 3 посредством добавления к тегу img класса.img-responsive ;
• в Bootstrap 4 посредством добавления к тегу img класса.img-fluid .

Эти классы применяет к изображению CSS свойства max-width:100% и height:auto .

Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:

/* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */ img { display: inline-block; height: auto; max-width: 100%; } /* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */ img { display: block; height: auto; max-width: 100%; } /* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */ #main img { display: block; height: auto; max-width: 100%; }

Данное правило необходимо добавить в CSS файл, который должен быть подключен после файла bootstrap.css .

Как изменить форму изображения

В Bootstrap 3 и 4 можно с помощью соответствующих классов сделать изображение с закругленными углами (Bootstrap 3 - img-rounded , Bootstrap 4 - rounded), заключить его в рамку (img-thumbnail) или придать ему форму круга (Bootstrap 3 - img-circle , Bootstrap 4 - rounded-circle).

Как изменить расположение изображения

Изменить расположение изображения в Bootstrap 3 можно с помощью вспомогательных классов float (.pull-left и.pull-right), класса.center-block и классов для выравнивания текста (.text-left , .text-center и.text-right).

В Bootstrap 4 для выравния элементов используются следующие классы: float-left , float-right , mx-auto и классы для выравнивания текста (.text-left , .text-center и.text-right).

Внимание:
Классы.pull-left , .pull-right и.center-block могут применяться для выравнивания изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы. После их применения изображения становится блочными.
Классы.text-left , .text-center и.text-right могут быть использованы только для изменения расположения изображений, которые ведут себя как строчно-блочные (inline-block) элементы.

Например, для того чтобы расположить изображение по левому краю к нему необходимо добавить класс.pull-left:

Например, для того чтобы расположить изображение по правому краю к нему необходимо добавить класс.pull-right:

Например, для того чтобы выровнять изображение по центру к нему необходимо добавить класс.center-block или поместить его в контейнер div с классом.text-center:

Примеры оформления изображений

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

Вариант 1. Оформление изображения с помощью рамки, представляющей собой окно браузера в Mac OS (с тремя элементами управления слева).

/* CSS */ .srcshot { position: relative; background: #fff; border: 2px solid #9e9e9e; margin-top: 20px; margin-bottom: 20px; } .srcshot-header { display: flex; align-items: center; height: 20px; background: #9e9e9e; border-bottom: 2px solid #9e9e9e; } .srcshot-header::after { content: "скриншот"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #fff; margin-left: auto; margin-right: 5px; } .srcshot-header-btn { width: 10px; height: 10px; background: #fff; margin-left: 5px; border-radius: 5px; } .srcshot-wrapper { margin: 5px; } @media (min-width: 768px) { .srcshot-wrapper { margin: 15px; } } .srcshot-wrapper-item { display: block; max-width: 100%; height: auto; margin: 0 auto; }

Вариант 2. Рамка для изображения, имеющая вид окна браузера в ОС Windows (с тремя элементами управления справа).

/* CSS */ .srcshot { position: relative; background: #fff; border: 2px solid #9e9e9e; margin-top: 20px; margin-bottom: 20px; } .srcshot-header { display: flex; align-items: center; height: 20px; background: #9e9e9e; border-bottom: 2px solid #9e9e9e; } .srcshot-header::before { content: "скриншот"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #fff; margin-left: 5px; margin-right: auto; } .srcshot-header-btn { width: 18px; height: 10px; background: #fff; margin-right: 5px; } .srcshot-wrapper { margin: 5px; } @media (min-width: 768px) { .srcshot-wrapper { margin: 15px; } } .srcshot-wrapper-item { display: block; max-width: 100%; height: auto; margin: 0 auto; }

Вариант 3. Изображение с рамкой и поясняющей надписью «скриншот».

/* CSS */ .srcshot { position: relative; text-align: center; margin-top: 20px; margin-bottom: 20px; } .srcshot::before { content: "скриншот"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 6px 6px 4px; color: #616161; background: #fff; font-size: 12px; } .srcshot-dark::before { color: #fff; background: #616161; } .srcshot-item { display: inline-block; border: 5px solid #fff; box-shadow: 0 0 10px #9e9e9e; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; max-width: 100%; height: auto; } .srcshot-item-dark { border: 5px solid #616161; }

Вариант 4. Изображение с белой рамкой и тенью.

/* CSS */ .img { display: block; margin-top: 20px; margin-bottom: 20px; text-align: center; } .img-item { display: inline-block; border: 5px solid #fff; box-shadow: 0 0 10px #9e9e9e; max-width: 100%; height: auto; }

Зачем обязательно надо делать картинки адаптивными ? К сожалению, то счастливое время, когда можно было вставить картинку на веб-сайт и указать подлинные её размеры, безвозвратно ушло. Теперь, мы должны все время думать и о маленьких экранах.

Что произойдёт, если размеры картинки будут больше размера экрана? Во-первых появится горизонтальная полоса прокрутки, картинки выйдут за пределы адаптивного блока, тем самым сломают дизайн сайта или просто частично обрежутся. В любом случае, так не годится и картинки надо тоже адаптировать под меняющуюся ширину экрана.

Как сделать галерею с адаптивными картинками?

Для начала, в теге img больше не надо указывать ширину и высоту.