Статья, в которой познакомимся с классами фреймворка 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;
}
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS. Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset , для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными. Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение. Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
CSS:
div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* центрируем основной контейнер */
}
img {
width: 100%; /* ширина картинки */
height: auto; /* высота картинки */
}
Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Всем привет! Мы разобрались с тем, что такое адаптивная верстка, сетка и как сделать адаптивными шрифты. Теперь же давайте разберем, как адаптировать изображения .
На самом деле это очень простая тема, и она не займет у нас много времени.
Чтобы ваши изображения стали гибкими, нужно просто добавить им свойство max-width=100% .
Img {
max-width: 100%;
}
Все! Теперь наше изображение не будет выходить за пределы родительского контейнера и будет адаптироваться в зависимости от разрешения экрана.
Помимо изображений вы можете использовать этот прием для видео и других медиафайлов.
Img, embed, object, video {
max-width: 100%;
}
Все бы хорошо, но это работает только в IE7+ Если же вам нужно поддерживать IE6 , то там это свойство работает в такой записи:
Img {
width: 100%;
}
Т.е. вместо max-width пропишите width .
Еще одна проблема, которая может вам встретиться, это плохое масштабирование изображений в Windows . Да, именно в системе, а не браузере. Если присмотреться, то можно заметить некоторые артефакты.
Решить эту проблему для IE просто.
Logo {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}
Т.е. эту проблему нам помогает исправить свойство filter .
Проблема адаптивных картинок довольно актуальна, поэтому начну с небольших рассуждений и способов реализации, а потом выделю вариант, который, как по мне подходит наилучшим образом.
Итак, около года назад я считал, что для того, чтобы сделать картинку адаптивной (то есть сделать так, чтобы она растягивалась или сжималась по ширине контейнера), достаточно воспользоваться следующим кодом:
Wrapper img{ width: 100%; }
И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения 2048 x1536px ?
Если вы не используете svg и это растровое изображение, то первое, что приходит на ум, – это взять картинку, которая подходила бы к максимальному разрешению landing page, а уже с изменением размера окна браузера, она будет сжиматься с нормальным качеством.
И тогда возникает проблема производительности. Глупо для смартфона подгружать такие большие картинки, которые хорошо смотрятся на retina разрешении. Ведь скорость мобильных сетей не такая высокая, как у ПК, и некоторые пользователи могут не дождаться загрузки лендинга на своем смартфоне. А в результате – это потерянный клиент.
Можно попробовать задать несколько дивов с картинками, а потом, при помощи медиазапросов, скрывать ненужные и показывать только ту картинку, которая подходит под текущее разрешение.
Вроде бы проблема решена. Но дело в том, что браузеры, для того, чтобы ускорить отображение страницы предзагружают картинки, которые прописаны в html до того, как начнет обрабатываться css. Может я не совсем правильно выразился (поправьте), но если провернуть такой трюк, то все картинки все равно будут загружены, вне зависимости от того, что прописано в css. А значит мы только усугубили положение для мобильных устройств. Теперь им придется грузить не одно, а несколько изображений.
В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку “Сеть”.
Вообще, существует еще много проблем, которые могут возникнуть при верстке адаптивных изображений. И решений, накопилось тоже не мало. Все зависит от конкретной ситуации.
В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:
Особенность в том, что вместо src – используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.
Вообще, при использовании новых тегов, я рекомендую заглядывать на это сайт и проверять текущее положение вещей.
Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE – не жалко, они должны страдать). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория
Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill.js .
Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).
В отличии от способа, описанного выше, сейчас грузится только одна картинка, а не три, как это было раньше.
Каждый веб дизайнер знает, что создание адаптивной верстки является, пожалуй, одной из самых сложных задач, с которой он может столкнуться в своей работе. Проблема заключается не только в том, что необходимо учесть особенности размеров экранов различных устройств и подобрать расположение блоков на сайте таким образом, чтобы веб проект смотрелся красиво как на экране компьютера, так и на мобильном телефоне, но в том, что многие современные девайсы имеют так называемые «ретина»-мониторы с повышенной плотностью пикселей, предъявляющие специальные требования к веб верстке.
Дело в том, что «ретина»-экраны дают изображения повышенной четкости за счет двукратного уплотнения пиксельных точек, из которых состоят картинки. Но у этого улучшения есть и «минусы», и самый главный из них заключается в том, что теперь необходимо дополнительно подбирать иллюстрации повышенной четкости специально для «ретина»-мониторов. Существуют различные решения для того, чтобы добиться высокой четкости изображения как на обычных, так и на «ретина» устройствах. Давайте рассмотрим некоторые примеры.
Традиционный метод с использованием только свойств CSSЧасто в веб дизайне используется одна и та же картинка определенного размера, для которой задается максимальный размер отображения на экране, меньший, чем ее оригинальный размер, в два или более раз.
Простой пример: предположим, вы хотите, чтобы ваш логотип размером 250 x 250 px правильно отображался на экране с двойной плотностью пикселей. В таком случае вам нужно создать другое изображение с логотипом, большее желаемого размера на экране в два раза, т.е. 500 x 500 px.
Теперь необходимо решить основную задачу - как сделать так, чтобы отображение картинки всегда оставалось одинаковым, т. е. ее размер всегда был 250 x 250 px?
Возможно, кому-то в голову сразу же пришла идея написать простой CSS код, что-нибудь наподобие этого:
Img { max-width: 250px; }
Как ни странно, но этот метод не будет работать. Вам необходимо ограничить размер контейнера, который содержит изображение, а не самого изображения. Должно получиться что-нибудь такое:
Div img { max-width: 250px; }
Каковы недостатки этого метода?
Если использовать данный способ верстки для небольших изображений, вроде логотипов или иконок, скорее всего, вы не столкнетесь с проблемами. Однако для больших иллюстраций этот метод не подходит. Разве вам нравится загружать огромные изображения специально для «ретина» устройств, которые даже не смогут отобразить все детали вашей иллюстрации?!
Подумайте о посетителях своего сайта. Что вы скажете человеку, который в спешке пытается прочитать важную информацию с вашего веб ресурса, подключившись через usb-модем, не слишком то хорошо ловящий сигнал связи? Конечно, вы можете потерять определенную часть аудитории, если не подумаете о том, как правильно создавать адаптивный дизайн вашего сайта.
К слову, если вы хотите немного менять дизайн сайта в зависимости от скорости соединения на стороне клиента, вы можете использовать специальную утилиту Foresight.js от Adam Bradley, которая измеряет скорость загрузки 50К изображения.
Еще один недостаток метода связан с тем, что соотношение сторон обычного монитора и экрана мобильного телефона разное. Поэтому фоновое изображение, вытянутое горизонтально, после уменьшения до ширины экрана на мобильном телефоне будет выглядеть довольно странно, оставляя много пустого пространства внизу. В случае с мобильным телефоном будет лучше, если веб мастер будет иметь возможность увеличить изображение, выделить его значимую часть и поместить этот кусок картинки в качестве фона вместо целого изображения.
Есть ли альтернатива?Но существует большое количество альтернатив, позволяющих адаптировать изображения под разрешение экрана, не перегружая при этом канал связи и не тормозя работу девайса посетителя сайта.
Большинство таких способов основываются на сочетании использования скриптов, выполняющихся как на стороне клиента, так и на стороне сервера. Первые из них, написанные на языке javascript, узнают все о свойствах устройства, используемого посетителем сайта, и о скорости Интернет-соединения, вторые могут подгружать картинку нужного качества в зависимости от полученной информации.
Современный разработчики создали достаточно большое количество скриптов, выполняющих подобные функции. В качестве примера можно привести специальный Jquery скрипт HiSRC, разработанный Marc Grabanski и Christopher Schmitt, который позволяет загружать один вариант из трех для каждого изображения в зависимости от типа устройства пользователя и скорости Интернета-соединения.
В общем виде HTML-разметка для этого скрипта выглядит так:
В атрибуте src необходимо указать путь до файла с изображением, которое грузится в первую очередь, как правило, самого низкого качества. После загрузки страницы скрипт проверит скорость Интернет-соединения и тип экрана устройства, с которого посетитель зашел на сайт. Если позволяет скорость Интернета, и устройство поддерживает «ретина»-изображения, будет загружена картинка, расположенная по адресу, указанному в атрибуте data-2x, если девайс поддерживает обычные изображения, будет загружена картинка по адресу в атрибуте data-1x, и если не позволяет скорость Интернета, то никаких изменений не будет производиться. Специальный класс, добавленный для изображения, будет указывать скрипту, что с этим элементом DOM необходимо произвести определенные преобразования.
Сам скрипт подключается путем добавления кода:
$(document).ready(function(){ $(".hisrc").hisrc(); });
Все очень просто и не требует лишней мороки. Достаточно подобрать три различных изображения для загрузки в разных ситуациях, и ваш сайт будет готов к работе. Вы можете создать отдельный вариант картинки с измененными пропорциями специально для мобильных устройств.
Метод имеет и ряд недостатков. Во-первых, необходимо дополнительно подключать библиотеку Jquery. Во-вторых, метод требует специфической HTML-разметки, что может подходить не всем веб мастерам, так как в некоторых случаях способ вывода -тэга не может быть изменен.
Интересный способ создания адаптивных изображений предлагает сервис Sencha.io Src (на момент написания статьи еще функционирует), который вообще не требует никаких настроек на сервере. Сервис работает по принципу прокси.
Просто вставьте префикс http://src.sencha.io/ перед адресом вашего изображения в атрибуте src, и всю остальную нагрузку на себя возьмет Sencha.io Src. Это бесплатный сервис, позволяющий решить большинство проблем современного веб дизайнера.
К недостаткам сервиса можно отнести то, что, используя его, вы ставите себя в зависимость от функционирования постороннего ресурса, любые сбои в его работе отразятся на вашем сайте, так что я НЕ РЕКОМЕНДУЮ его использовать, да и не только его, а вообще любые сторонние сервисы.
ЗаключениеКак видите, действительно существуют альтернативные способы подготовки адаптивных изображений для веб сайтов. В данной статье были перечислены далеко не все методы, доступные современным пользователям. Число сервисов и плагинов, позволяющих контролировать разрешение изображений в зависимости от свойств устройств, на которых просматривается веб сайт, растет с каждым днем. Веб мастерам не остается ничего, кроме как тестировать каждый из них и выбирать тот или иной метод в зависимости от насущных задач, с которыми им приходится сталкиваться.