Как сделать картинку адаптивной css

Заметка: как использовать HTML "picture" для адаптивных изображений

Изображения заведомо являются одним из самых сложных аспектов адаптивного веб дизайна. Сегодня мы рассмотрим как элемент <picture> , являющийся решением проблемы адаптивных изображений, можно использовать прямо сейчас.

Вначале о проблеме

Времена попиксельного (pixel perfect) и дизайна фиксированной ширины (fixed-width) ушли в прошлое. Теперь во времена широкоформатных мониторов, интернет телевидения, планшетов и смартфонов различных размеров наши дизайны должны удовлетворять любому устройству шириной от 320px до потенциальных 7680px.

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

Так что же нам делать?

Текущее общепринятое решение

Как правило, вы найдете этот код на любом сайте с адаптивные дизайном:

Здесь используется max-width: 100%; для гарантии того, что изображение никогда не выйдет за пределы ширины родительского контейнера. Если родительский контейнер сжимается до ширины, меньшей чем ширина изображения — последнее сжимается вместе с контейнером. Установка height: auto; нужна для сохранения пропорций.

Одно "жидкое" изображение под все случаи

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

Новое решение: <picture>

<picture> это новый элемент, который является частью HTML5.

Он реализует способ описания адаптивных изображений таким же способом, как это делается в <audio> и <video> . Таким образом можно размещать несколько тегов <source> , каждый из которых содержит имена файлов различных изображений вместе с условиями, при которых те должны быть загружены.

Это позволит загружать разные изображения в зависимости от:

  • Результатов media выражений, например высоты, ширины или ориентации видимой области
  • Плотности пикселей

Это в свою очередь означает, что вы можете:

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

Как работает <picture> ?

Основные шаги при работе с <picture> :

  1. Создайте открывающий и закрывающий теги <picture></picture> .
  2. Внутри создайте <source> элемент для каждого выражения, что хотите обработать.
  3. Добавьте атрибут media , содержащий выражения для таких вещей как высота и ширина области просмотра, ориентация и т.д.
  4. Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.
  5. Добавьте дополнительные имена файлов к атрибуту srcset , если нужно поддерживать разную плотность пикселей, например для Retina дисплеев.
  6. Добавьте резервный (fallback) элемент <img> .

Вот простой пример, где для случая, когда ширина видимой области меньше 768px — загружается уменьшенное (smaller) изображение:

Можно заметить, что синтаксис, используемый в атрибуте media является таким же, как и при использовании в CSS media queries. Вы можете использовать те же самые проверки, т.е. проверять max-width , min-width , max-height , min-height , orientation и т.д.

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

Этот код загружает уменьшенную альбомную (landscape) версию изображения для устройств с малым экраном и соответствующей ориентацией. И увеличенную версию того же изображения для устройств с большим экраном.

Если устройство имеет книжную (portrait) ориентацию — загружается книжная версия изображения, уменьшенная для устройств с малым и увеличенная для устройств с большим экраном.

Если вы хотите предоставлять изображения в другом разрешении для дисплеев с повышенной плотностью пикселей, это можно сделать, указав дополнительные имена файлов в атрибуте srcset . Давайте к примеру посмотрим на наш первый кусок кода с добавлением обработки для Retina 2x дисплеев:

Т.к. сначала обрабатывается media query, вы можете управлять размерами изображения, с которыми оно будет показано на экране. Затем будет проверяться плотность пикселей: если дисплей поддерживает повышенную плотность и в пользовательских настройках есть на это разрешение — будут загружены соответствующие версии изображений.

Использование <picture> сегодня

Прямо сейчас встроенная поддержка <picture> реализована в Chrome, Firefox и Opera. В будущем, вполне вероятно, мы увидим широкую поддержку и другими браузерами. Но до этого момента еще надо дожить.

Тем временем вам не нужно ждать, если хотите использовать <picture> прямо сейчас. Просто воспользуйтесь Picturefill 2.0; polyfill от умных людей из Filament Group.

После скачивания файла picturefill.js в свой проект просто подключите его в шапке:

Есть также опция для асинхронной загрузки скрипта, о которой можно прочитать в документации Picturefill.

При использовании этого скрипта элемент <picture> будет работать так, как я и объяснял, но с несколькими ограничениями.

Ограничения Picturefill

Picturefill отлично работает с разными версиями IE, однако IE9 не поддерживает <source> элементы, которые используются внутри <picture></picture> . Чтобы обойти это, оберните source элементы в <video> теги с помощью условных комментариев; это сделает их видимыми для IE9, например:

Android 2.3

Как и IE9, Android 2.3 не показывает <source> элементы внутри <picture> . Однако он понимает атрибут srcset при использовании в обычных <img> тегах. Убедитесь в том, что всегда включаете резервный <img> с именем файла по умолчанию в атрибут srcset для Android 2.3 и других браузеров, которые могут иметь такую же проблему.

Требуется JavaScript и встроенная поддержка Media Query

Соответственно требуется, чтобы JavaScript был включен в браузере. Picturefill 2.0 не предоставляет «no-js» решения, ведь если это будет сделано, то когда браузер выкатит нативную поддержку <picture> — будет показываться уже несколько изображений. Однако, вы можете использовать Picturefill 1.2, если параметр «no-js» является для вас обязательным.

Другим требованием Picturefill является встроенная поддержка media query, чтобы позволить обрабатывать выражения в атрибуте media . Все современные браузеры поддерживают media-выражения, лишь IE8 и ниже не имеют их поддержки, что соответствует лишь малой части пользователей.

Возможны дополнительные HTTP-запросы

Возможно, что в браузерах, которые имеют встроенную поддержку srcset , но пока не имеют поддержки <picture> , указанный в резервном элементе <img> файл может быть запрошен до того, как будет определен подходящий вариант из <source> .

Это лишь временная проблема, и она пропадет как только выкатят встроенную поддержку <picture> .

WEBTEORETIK

alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt

Одиночное адаптивное изображения

Категория: Адаптивная верстка Просмотров: 3492 Коментариев: 0 Дата: 2017-02-11 Добавил: admin

 Медиа-запросы

В этой статье Вы узнаете, как сделать адаптивные изображения с помощью CSS. Это позволяет нам сделать изображения на страницах сайта гибкими и корректно отображающимися на различных экранах пользовательских устройств. Для адаптации используются процентные значения для ширины width и значения auto для высоты height.

1. Одиночные адаптивные изображения.

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

Адаптивные изображения

Для этого задаем следующие свойства для картинки img: Максимальную ширину для картинки — max-width: 100%; Высоту картинки устанавливаем в авто — height: auto; .

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

2. Одиночные адаптивные изображения с обтекающим текстом.

Второе, это рассмотрим случаи, когда текст обтекает картинку.

Адаптивные изображения

Для этого, к уже имеющимся свойствам картинки, добавим такие свойства как: display: block; и float: left; . Как мы уже знаем, float: left; выравнивает нашу картинку по (относительно) левому краю и задает обтекание нашей картинки с правой стороны.

Как видно, на 2-м примере картинка занимает ширину 45% от экрана браузера и с правой стороны ее обтекает текст. Обтекаемый текст сильно прижат к изображению, что вынуждает использовать отступы: margin: 0 20px 20px 0; . для блока с картинкой .container2 img

Все, казалось бы, хорошо, но когда сжимаем экран браузера до малых размеров то картинка становится очень маленькой, что крайне не удобно да и смотрится уже не совсем красиво. Чтобы это исправить нужно, для того же блока с картинкой .container2 img задать минимальную ширину изображения min-width: 300px; . В таком случае при уменьшении экрана изображение, дойдя до 300px, перестанет уменьшаться и будет оставаться постоянным. В итоге вот что должно получиться:

Но на этом еще не все, есть еще одна проблема. Когда сжимаем браузер до определенного размера, то текст обтекающий картинку становится не читабельным, так как между браузером и картинкой помещается одно максимум два слова. Для того что бы это исправить используем медиа запросы, для максимального размера экрана в 480px, делаем картинку не обтекающей и следовательно задаем float: none; , (как подключать медиа запросы можно найти тут). Так же, в медиа запросе нужно задать автоматическую ширину width: auto; и максимальную ширину max-width: 100%;, чтобы изображение не вылезало за блоки контейнера.

3. Адаптивные картинки в колонках.

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

Адаптивные изображения

Чтобы все это реализовать, для блоков .container3 img , .container4 img используются следующие свойства: height: auto; и display: inline-block; , а также задается ширина width: 48%;. Почему задается ширина для 2-х картинок именно в 48% ? Да, чтобы между картинками оставались боковые отступы в 2% и они не сливались одна в другую. Таким же образом поступаем и для блока с 3-мя картинками, для них задаётся ширина width: 32%;

4. Адаптивные картинки в колонках под различные устройства.

Четвертое – это рассмотрим различные варианты расстановок адаптивных изображений в зависимости от устройств просмотра.

Адаптивные изображения

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

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

Адаптивная вёрстка: что это и как использовать

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

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.

Регулировка разрешения экрана

В принципе, можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, да и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике мы имеем целый спектр разнообразных разрешений:

Спектр разрешений для адаптивной вёрстки

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Частичное решение: делаем всё гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем с адаптивной вёрсткой.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:

шаблон для адаптивной вёрстки

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

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

8 декабря в 18:00, Онлайн, Беcплатно

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

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

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

Ещё один способ: отзывчивые изображения

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

Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:

Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( "picture" ); перед первым тегом script.

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

Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.

Для более явного контроля над изображениями существует элемент picture.

Интересная фича для iPhone

В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:

Пример автоматической адаптивной вёрстки на iPhone

Для решения данной проблемы используется тег meta :

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.

Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

Настраиваемая структура макета страницы

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

Адаптивная вёрстка с помощью медиазапросов CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

Также значения медиазапросов можно комбинировать:

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

Возможность сжимать и менять местами элементы, чтобы они уместились на маленьких экранах, — это замечательно. Но это не лучший вариант. Для мобильных устройств обычно используется более широкий набор изменений: упрощенная навигация, более сфокусированный контент, списки или строки вместо колонок.

Опциональное отображение контента

К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.

display: none используется для объектов, которые нужно спрятать.

Пример отображения контента при разной ширине экрана

Вот наша разметка:

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

Теперь прячем колонки и показываем ссылки:

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

О примерах использования адаптивной вёрстки сайтов вы можете почитать в лучших практиках по реализации адаптивного веб-дизайна.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *