Статья, в которой познакомимся с классами фреймворка 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; }
Сегодня вы узнаете как можно очень просто сделать любое изображение адаптивным и масштабируемым, то есть чтобы оно растягивалось на весь экран. К примеру если вы делаете для своего сайта фото обложку или фоновое изображение, то вы должны учитывать, что сайт будет открываться на разных устройствах, разных размеров. Изображение должно подстраиваться под любой размер экрана.
Давайте для примера добавим на один черновой сайт (wordpress) фото обложку. Открываем любую запись или страницу, загружаем туда уже подготовленную фото обложку для сайта, переходим на вкладку “Текст”, копируем код который мы будем вставлять в файл header.php. Вставляем код фото обложки перед закрывающимся тегом head. Обратите внимание как по умолчанию указаны размеры изображения, они конкретные. То есть, вы делаете обложку под свой размер экрана, а если на ваш сайт зайдёт человек, у которого размер экрана больше вашего, то обложка будет у него отображаться не на весь экран.
Заходим на сайт, обложка отображается. Если у вас адаптивный шаблон, то обложка будет адаптироваться под более маленькие экраны, а вот под экраны которые больше ширины изображения, обложка не будет подстраиваться.
Чтобы убедиться в том что обложка не будет адаптироваться на больших экранах, заходим на сайт сервиса “quirKtools” , в инструмент “Screenfly” . Вводим в поле адрес нашего сайта, жмём кнопку GO . Вверху страницы выбираем самый большой размер экрана и видим, что обложка не растягивается, то есть не масштабируется, так как в коде указаны конкретные размеры.
Адаптивное изображение на любом экране
Чтобы сделать изображение адаптивным и масштабируемым, чтобы оно адаптировалось под любой размер экрана, нужно внести в код одно простое изменение. В коде изображения обложки, убираем обозначение высоты (height), а для ширины указываем значение – “100%” (смотри скриншот). Сохраняем код.
Снова заходим в сервис “quirKtools” , выбираем самый большой размер экрана и смотрим что теперь обложка сайта адаптируется под самый большой размер экрана.
Ширина изображения будет отображаться на любом устройстве на 100%, то есть на весь экран, а высота изображения будет вычисляться автоматически пропорционально ширине изображения. Если бы вы указали конкретный размер высоты изображения, то изображение отображалось бы искажённым, то есть не пропорциональным.
Дата публикации: 2013-12-16
От автора: Если вы кодируете вебсайты, могу побиться об заклад, что по меньшей мере один из ваших клиентов интересовался или заказывал вебсайт с поддержкой сенсорного ввода. Если вы идете стезей адаптивного дизайна (в соответствии с чем ваш вебсайт достаточно гибок, чтобы визуально подстраиваться под ширину экрана от мобильного устройства до десктопа), то вам также понадобится стратегия создания гибких изображений - решение для адаптивных изображений.
Выучить основы довольно просто, но как только вы их усовершенствуете, то обнаружите, что масштабирование изображений – это только начало, вам также придется решать вопросы производительности и загадки художественной постановки. Вы столкнетесь с огромным выбором решений проблемы адаптивных изображений, каждое со своими сильными и слабыми сторонами - и ни одного идеального! Эта статья введет вас в основы, а затем вооружит информацией, нужной для того, чтобы выбрать самое лучшее решение для адаптивных изображений в вашей ситуации.
Основы
Назначить стили изображениям переднего плана для того, чтобы подогнать ширину их контейнера, очень легко. В таблицу стилей, возможно, в таблицу нормализации или сброса стилей, добавляется следующий код:
img { max-width: 100%; }
img { max - width : 100 % ; |
В большинстве случаев это крошечное правило стилей создает нужный результат! Когда оно стоит на месте, то если контейнер вокруг изображения становится уже его ширины, изображение масштабируется так, чтобы совпасть с шириной своего контейнера. Установка max-width на 100% также гарантирует, что изображение не станет больше своего настоящего размера, что значительно снизило бы его качество. Если вы увязли в попытке обеспечить поддержку для IE 6 или 7, вам понадобится добавить правило стиля width: 100%, которое предназначается только для этих браузеров, потому что они не понимают max-width.
Изображения в высоком разрешении “Retina” могут осложнить эту простую реализацию. Скажем, вам нужно, чтобы логотип размером 150 × 150px отображался в двойной пиксельной концентрации по отношению к его обычной, а изображение достаточно маленькое, так что получение двух отдельных вариантов не станет проблемой. Итак, вы создаете версию логотипа 300 × 300 px, включаете ее - и теперь она огромная! Вашим первым побуждением, возможно, станет попробовать в CSS нечто вроде этого:
img.sitelogo { max-width: 150px; }
img . sitelogo { max - width : 150px ; |
К сожалению, ничего не работает так, как нужно - изображение-логотип теперь откажется нормально масштабироваться с прочими изображениями на странице.
Чтобы ограничить максимальную ширину адаптивного изображения, вам пришлось бы ограничить максимальную ширину контейнера с изображением, а не самого изображения! Скажем, вы обернули изображение-логотип в модуль с классом branding. Вот стиль, который выдаст нужный результат:
Branding { max-width: 150px; }
Branding { max - width : 150px ; |
Итак, теперь в гибкой разметке сайта есть масштабируемые адаптивные изображения. Миссия выполнена. Пора выяснить, что может нам предложить это незнакомое внешнее пространство соскучившемуся по солнышку разработчику, правильно?
Не так быстро! Нам еще нужно преодолеть две главные трудности.
Проблема производительности
При вышеописанном решении адаптивных изображений всем устройствам «скармливаются» одни и те же изображения. Оно неплохо справляется с маленькими иконками и логотипами, но проблема быстро усложняется по мере увеличения и утяжеления изображений. Изображения Retina ее еще больше обостряют - вам не требуется посылать большие изображения Retina на устройство, неспособное отобразить его подробности!
Подумайте об этом. Нужно ли на самом деле посылать изображение в 990 × 300 px и 100 KB, предназначенное для пользователей десктопов, на мобильный телефон? Конечно, посетитель с мобильного устройства может сидеть на Wi-Fi-соединении своего местного кафетерия - однако может оказаться в дороге при неустойчивом беспроводном соединении и пытаться отыскать на вашем вебсайте важную информацию. Каждый мобильный пользователь, сдающийся при слишком долгой загрузке страницы – это потенциально потерянный клиент!
В природе сегодня можно отыскать множество мобильных вебсайтов, которые такие же большие, или даже больше своих десктоповых собратьев. Гай Поджарный (Guy Podjarny) с год назад провел несколько тестов, и не заметил значительного улучшения: в 2011г. 86% вебсайтов были того же размера или даже больше, а в 2012г. это количество уменьшилось до 72%, но увеличился общий размер сайтов. Дэйв Руперт (Dave Rupert) тоже отметил эту проблему в своей статье Больше пикселей – больше проблем (Mo’ Pixels Mo’ Problems).
СЛЕДУЮЩЕЕ ОСЛОЖНЕНИЕ: БРАУЗЕРНАЯ ПРЕДЗАГРУЗКА
Впервые начав борьбу с проблемами производительности адаптивных вебсайтов, я изначально планировал извлекать все варианты изображений на страницу, но установить несколько классов CSS с медиапросами, которые при небольшой ширине скрывали бы большие изображения и показывали маленькие, а при ширине настольного компьютера поступали бы наоборот. Это кажется логичным: не обязан ли браузер скачивать только видимые изображения?
Проблема в том, что для нас браузеры слишком быстрые! Для обеспечения наименьшего возможного времени загрузки браузеры предварительно скачивают все изображения, которые могут определить в исходном коде еще до начала обработки CSS или JavaScript’а. Так что в действительности такой подход поставит мобильных посетителей в невыгодное положение еще сильнее, заставляя их скачивать все варианты изображений!
Из-за предварительного скачивания требуется либо прикладное back-end решение (чтобы предупредить предзагрузку), либо специальная разметка и JavaScript.
ОПРЕДЕЛЕНИЕ ПРОПУСКНОЙ СПОСОБНОСТИ
Последняя деталь головоломки производительности – скорость сети. Ясно, что следует поставлять большие изображения только на те устройства, которые подключены к быстрой сети, но как это определить? Для оценки скорости существует несколько методов, но они еще не полностью надежны.
W3C работает над технологией Network Information API, которая в будущем может очень пригодиться, но в данный момент поддерживается только малым количеством устройств (и, к сожалению, небольших). Сейчас она выполняется в нескольких решениях для адаптивных изображений, но ее широкого применения нельзя ожидать до появления нормальной поддержки. Измерить сеть сложно и, как утверждает Йов Вайсс (Yoav Weiss) в своей статье на сайте Smashing Magazine, надежные «медиазапросы к пропускной способности», похоже, в ближайшем будущем не смогут быть внедрены должным образом.
Foresight.js от Адама Брэдли (Adam Bradley) пользуется JavaScript’ом для тестирования того, сколько времени нужно браузеру для загрузки изображения в 50K, затем хранит эту информацию и применяет ее для принятия решений о пропускной способности. У него имеется несколько мелких недостатков: на вашу страницу добавляется скачивание 50K изображения, и загрузка остальных изображений может блокироваться до момента окончания загрузки тестового. Многие решения адаптивных изображений, применяющих в данный момент определение пропускной способности, пользуются вариацией или адаптацией Foresight.js.
Проблема «художественного руководства»
Скажем, на домашней странице вашего сайта есть отличное широкое изображение. На нем изображена пасторальная сцена с полями и лесом, голубым небом и пушистыми облаками, и счастливым семейством на травке.
Теперь отмасштабируйте ее для мобильного устройства до ширины в 300 px. При таком размере семья на отдыхе смотрится, как муравьи на пикнике!
При масштабировании большого изображения теряются подробности .
Здесь и лежит проблема так называемого «художественного руководства». Некоторые изображения просто невозможно хорошо масштабировать; теряются мелкие детали и снижается яркое воздействие. В случае с нашим изображением оно вышло бы гораздо лучше визуально, если б мобильная версия фотографии была приближена, обрезана, а счастливая семья оказалась бы в фокусе. Для этой проблемы нам понадобится такое решение адаптивного изображения, которое даст возможность либо определить разные версии изображения для разных ситуаций, либо подстраивать изображение «на ходу».
Иногда при маленькой ширине экрана желательна обрезка или приближение изображения .
Выбор своего решения
К счастью, у сообщества веб-разработков и дизайнеров нет недостатка в умных, творческих личностях, работающих над решением этих проблем. Конечно, обратной стороной монеты является то, что можно легко оказаться сбитым с толку количеством существующих адаптивных решений. Как вы думаете, какое подойдет вам лучше всего?
Выбор может оказаться крайне сложным, потому что в игру вступает так много факторов. В данный момент не существует идеального решения в любой ситуации; каждое из них было создано для решения определенного набора проблем. Чтобы выбрать, вам придется взвесить их в свете конкретных запросов вашего проекта. Крис Койер (Chris Coyier) проделал огромную работу, резюмируя факторы принятия решения (включая таблицу для их отслеживания, хотя некоторые из новейших методов не упомянуты). Вот некоторые из факторов, которые нужно обдумать:
Придется ли вам решать проблему художественного руководства (т.е. различных соотношений изображения, обрезки и размеров для разной ширины)?
У вас большой вебсайт или CMS, где нереально вернуться и добавить специальную разметку к каждому изображению?
Все ли изображения имеются налицо при загрузке страницы, или некоторые динамически загружаются через JavaScript?
Хотите ли вы проверять пропускную способность пользователя, чтобы определить, достаточно ли быстрое у него соединение для загрузки изображений в высоком разрешении?
Требуется ли для выбранного решения недоступная вам платформа (такая как jQuery или PHP)?
Применимо ли для вас стороннее решение, или оно вам нужно на внутреннем хостинге?
С этой целью давайте рассмотрим некоторые адаптивные решения изображений, уже некоторое время существующие и широко применяемые в сообществе разработчиков.
Заметьте, пожалуйста: список нижеприведенных решений ни в коем случае не окончателен. Либо я лично нашел их наиболее полезными, либо они уже находятся в послужном списке из-за своей надежности. У вас есть любимое решение, отсутствующее здесь? Расскажите нам о нем в комментариях!
Опробованные и надежные адаптивные решения
PICTUREFILL
Сеть на самом деле всемирная, и нам приходится противостоять тому факту, что не у всех есть доступ к соединениям по оптоволоконному кабелю и 4G-сетям. Скотт Джел (Scott Jehl) лично столкнулся с этим цифровым неравенством во время путешествия и работы в Юго-Восточной Азии, и он – ярый сторонник mobile-first и адаптивных вебсайтов, которые не отягчают мобильных пользователей. Его скрипт Picturefill – это полифил для предложенного элемента - кода JavaScript, имитирующего API изображения – дающий нам возможность уже сегодня применять его в своих вебсайтах. Будущее наступило, детка!
Picturefill’у не требуется jQuery, но, естественно, ему нужно, чтобы куда-либо на страницу был включен скрипт picturefill.js. Picturefill’у также нужна специальная разметка, с div’ами для представления вариантов изображения, различаемых атрибутами data-media, которые действуют как медиазапросы в CSS. Также можно по выбору внести изображение в условные комментарии для тех браузеров, которые на поддерживают медиазапросов (это об IE 8), и альтернативный вариант в тэг noscript для тех браузеров, где отключен JavaScript (это о BlackBerry). Вот пример типичных настроек Picturefill:
< span data - picture data - alt = "Descriptive alt tag" > < span data - src = "images/myimage_sm.jpg" > < / span > < span data - src = "images/myimage_lg.jpg" data - media = "(min-width: 600px)" > < / span > < ! -- [ if (lt IE 10 ) & (! IEMobile ) ] > < span data - src = "images/myimage_sm.jpg" > < / span > < ! [ endif ] -- > < ! -АльтернативныйконтентдлябраузеровбезJS . -- > < noscript > < img src = "images/myimage_sm.jpg" alt = "Descriptive alt tag" / > < / noscript > < / span > |
Вот и все, что нужно для отображения адаптивных изображений во время загрузки страницы с помощью Picturefill. Внесите скрипт, сконфигурируйте разметку и все легко заработает. Также можно вызывать Picturefill программным путем, если требуется «на ходу» добавлять изображения на страницу.
Picturefill’у нужно большое количество пользовательской разметки, поэтому он может оказаться не лучшим выбором для тех, кому никак нельзя менять исходный код вебсайта. Кроме того, он не делает определения пропускной способности. Если она очень важна для вашего проекта, то рассмотрите следующее решение.
HiSRC от Марка Грабански (Marc Grabanski) и Кристофера Шмитта (Christopher Schmitt) – это плагин jQuery, который позволяет создавать версии изображения в низком, среднем и высоком разрешении, а скрипт показывает самое подходящее из них на базе готовности к Retina и скорости сетевого подключения.
Чтобы установить его, сначала убедитесь, что где-то на страницу добавлен jQuery и скрипт HiSRC.
В коде HTML сначала добавьте на страницу обычный тэг изображения и установите исходник на версию изображения с самым низким разрешением (или на самое маленькое). Добавьте к изображению или его упаковщику класс (вроде.hisrc), чтобы определить, какие изображения должен обрабатывать HiSRC. Затем добавьте специальную разметку к тэгу изображения: атрибуты data-1x и data-2x для версий со средним и высоким разрешением соответственно. Например:
< img src = "//placekitten.com/200/100" data - 1x = "http://placekitten.com/400/200" data - 2x = "http://placekitten.com/800/400" class = "hisrc" / > |
Затем после загрузки DOM просто вызовите функцию на используемый вами класс изображения, как тут:
$(document).ready(function(){ $(".hisrc").hisrc(); });
$ (document ) . ready (function () { $ (".hisrc" ) . hisrc () ; } ) ; |
На деле браузер сначала загрузит источник изображения - т.е. мобильную версию изображения. Затем скрипт проверит, использует ли пользователь мобильную пропускную полосу (такую, как 3G). Если это так, то он оставит изображение mobile-first. Если соединение скоростное, а браузер поддерживает изображения Retina, то будет доставлена версия @2x. Если соединение скоростное, но Retina не поддерживается, то будет доставлена версия @1x.
Вы могли обратить внимание, что изображение с низким разрешением загружается всегда, даже если скрипт позднее решит, что устройство пользователя – подходящий кандидат для высокого разрешения. Даже если технически это двойная загрузка, неудобства она доставляет только тем, у кого скоростное соединение. Я с удовольствием принимаю такой компромисс!
HiSRC может управлять изображениями, динамически добавляемыми на страницу. Он также позволяет множественные изображения, поэтому можно определить разные обрезки и размеры для того, чтобы побороться с проблемой художественного руководства.
Что касается его слабых сторон, то HiSRC требуется jQuery, поэтому он не принесет пользы, если вы не пользуетесь это библиотекой. Ему также нужна пользовательская разметка в HTML, так что он может оказаться не лучшим выбором, если у вас большой вебсайт со множеством унаследованных изображений или CMS, где нельзя изменить выпуск тэга изображения. Если это ваша ситуация, то читайте дальше!
АДАПТИВНЫЕ ИЗОБРАЖЕНИЯ
В отличие от двух первых скриптов, Adaptive Images Мэтта Уилкокса (Matt Wilcox) – это по большей части решение на серверной стороне. Ему требуется чуть-чуть JavaScript’а, но настоящая работа проделывается посредством веб-сервера Apache 2, PHP 5.x и библиотеки GD.
Для его установки на ваш веб-сервер понадобится переделать или добавить файл.htaccess, выгрузить несколько файлов PHP в корневую директорию вашего вебсайта, добавить немного JavaScript’а на страницы (который добавит куки-файл для записи разрешения экрана пользователя) и сконфигурировать несколько переменных контрольных точек в файлах PHP, соответствующих медиазапросам вашего вебсайта.
Инструкции по инсталляции весьма многословны - немного длинноваты для этой статьи. Для получения информации посетите официальный вебсайт и щелкните вверху ссылку “Details”.
Самое лучшее свойство Adaptive Images в том, что ему не требуется пользовательской разметки к изображениям. Если вам удалось его правильно установить и сконфигурировать, то это все! Скрипт PHP перехватит любой запрос изображения, на ходу изменит его размер так, как требуется для отдельных контрольных точек и автоматически установит на ваши страницы.
У PHP множество опций конфигурирования, таких как качество изображения, контрольные точки, кэширование и даже фильтр увеличения четкости, которые можно применить для генерирования масштабированных изображений.
У него есть несколько ограничений:
Из-за того, что ему требуется сочетание Apache и PHP, Adaptive Images может не подойти для платформы вашего вебсайта или оказаться недоступным с сервера вашего веб-хоста.
Он полагается на способность веб-сервера перехватывать все запросы на изображения (посредством файла.htaccess). поэтому если ваши изображения лежат где-то еще, например, в сети доставки контента, то работать он не станет.
Он не определяет пропускную способность.
Он не предназначен для решения проблемы художественного руководства, потому что только изменяет масштаб первоначальных изображений. Он не может обрезать исходное изображение или создать из него разные соотношения размеров.
Вы, возможно, заметили, что всем решениям так или иначе требуется JavaScript, и зачастую некоторая детализированная конфигурация. Если вы ищете такое, которому не нужен JavaScript, и которое можно сравнительно легко применить, то подумайте о следующем.
SENCHA.IO SRC
Известное до этого как TinySrc, Sencha.io Src – это стороннее решение, действующее как посредник, поэтому вам не нужно ничего конфигурировать на сервере. Просто направьте свое изображение на серверы Sencha (определив или не определив какие-нибудь опции), и Sencha обработает его и пошлет обратно нужную версию требуемых размеров.
Скажем, у вас есть большое изображение:
< img src = "//www.your-domain.com/path/to/image.jpg" alt = "My large image" / > |
В самом упрощенном варианте можно дописать префикс атрибуту src с http://src.sencha.io/, как здесь:
< img src = "//src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt = "My large image" / > |
Sencha.io по умолчанию изменит размер вашего изображения так, чтобы то соответствовало ширине экрана устройства, применив для детекции строку агента пользователя. На телефоны будет отправлено изображение шириной 320 px, на «таблетки» — шириной 768 px и так далее.
Также можно сконфигурировать строку-префикс Sencha.io так, чтобы та возвращала определенные размеры, ориентацию, размеры в процентах и любое количество сложных вычислений.
Sencha.io – бесплатный сервис для индивидуальных пользователей и может оказаться очень удобным решением проблемы адаптивных изображений. Однако вы добавляете зависимость от третьей стороны, при этом возможны простои и неконтролируемые вами проблемы. Тщательно взвесьте эти риски.
Решения проблемы адаптивных изображений, которые стоит рассмотреть
Описанные решения сейчас уже применимы, но не являются единственными в своем роде. Некоторые самые новые из них очень компромиссны, и я тщательно за ними присматриваю, чтобы видеть их развитие в современных веб-технологиях. В частности, ниже описаны два из них, на которые вы могли бы обратить внимание.
CAPTURING/MOBIFY.JS 2.0
Захват (Capturing) – новая возможность находящегося в разработке Mobify.js 2.0, которая предлагает доступ (или «захват») к исходной разметке HTML до начала ее анализа или отображения в браузере. Доступ к исходному коду на этом этапе дает возможность поменять атрибут изображения src до того, как браузер его скачает. Можно даже сделать альтернативный вариант к одному из других решений, такому как Picturefill, на случай неудачи.
Так как эта техника напрямую обходит «родную» предварительную загрузку браузера, это немного спорный момент в кругах веб-производительности. Будучи неправильно употребленной, она может создать настоящие проблемы с производительностью сайта вместо их устранения!
Одна из основных задач при адаптивной верстке - это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.
С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.
Данный трюк заключается в установке значения в процентах отступам (padding ) элемента. Впервые способ опубликован в старой статье блога A List Apart , однако он до сих пор хорошо работает.
Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон - 16:9. В коде ниже для отступов используется px , но все будет работать и с em . Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv .
Div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ }
Добавляем фон
Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover . К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position . Фоновая картинка должны быть по ширине как минимум равна max-width элемента. В обратном случае картинка будет обрезаться.
Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
Предположим, что есть большое фоновое изображение, которое отлично смотрится на десктопе. Но на мобильном устройстве оно будет слишком мелкое, поэтому правильным решением станет уменьшение ширины фона.
Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top :
На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top , начальная высота (start height) - атрибуту height . В итоге получается код:
Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
Использование SCSS для расчета
Атрибуты padding-top and height можно рассчитывать автоматически при помощи препроцессоров, например SCSS . Пример этого:/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); }
Всем привет! Мы разобрались с тем, что такое адаптивная верстка, сетка и как сделать адаптивными шрифты. Теперь же давайте разберем, как адаптировать изображения .
На самом деле это очень простая тема, и она не займет у нас много времени.
Чтобы ваши изображения стали гибкими, нужно просто добавить им свойство 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.svg?1",sizingMethod="scale");
}
Т.е. эту проблему нам помогает исправить свойство filter .
