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

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

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

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

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

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

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

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

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

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

Новое решение:

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

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

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

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

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

Как работает

Основные шаги при работе с

    Создайте открывающий и закрывающий теги

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

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

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

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

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

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

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

Использование

Прямо сейчас встроенная поддержка

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

Тем временем вам не нужно ждать, если хотите использовать

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




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

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

При использовании этого скрипта элемент

будет работать так, как я и объяснял, но с несколькими ограничениями.

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

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

. Чтобы обойти это, оберните source элементы в теги с помощью условных комментариев; это сделает их видимыми для IE9, например:

Android 2.3

Как и IE9, Android 2.3 не показывает элементы внутри

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

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

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

Возможно, что в браузерах, которые имеют встроенную поддержку srcset , но пока не имеют поддержки

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

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

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

Измените размер окна браузера, чтобы увидеть, как изображение масштабируется по размеру страницы.

Использование свойства width

Если для свойства width задано значение в процентах, а для высоты задано значение "auto", изображение будет адаптивным и масштабируется вверх и вниз:

Пример

Обратите внимание, что в приведенном выше примере изображение можно увеличить до размера, превышающего его исходный размер. Во многих случаях лучшим решением будет использование свойства max-width .

Использование свойства max-width

Если свойство max-width установлено на 100%, изображение будет уменьшаться, если это необходимо, но никогда не будет увеличиваться до размера, превышающего его исходный размер:

Пример

Добавить адаптивное изображение на веб-страницу

Пример

Фоновые изображения

Фоновые изображения также могут реагировать на изменение размера и масштабирование.

Далее вы увидите три разных метода:

1. Если свойство background-size установлено на "contain", фоновое изображение будет масштабироваться и пытаться соответствовать области содержимого. Однако изображение сохранит свое соотношение сторон (пропорциональное соотношение между шириной и высотой изображения):

Пример

div <
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
>

2. Если для свойства background-size установлено значение "100% 100%", фоновое изображение будет растягиваться, чтобы охватить всю область содержимого:

Пример

div <
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
>

3. Если для свойства background-size установлено значение "cover", фоновое изображение будет масштабироваться, чтобы охватить всю область содержимого. Обратите внимание, что значение "cover" сохраняет соотношение сторон, и некоторая часть фонового изображения может быть обрезана:

Пример

div <
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
>

Разные изображения для разных устройств

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

Вот одно большое изображение и одно меньшее изображение, которое будет отображаться на разных устройствах:

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

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

Пример

/* Для ширины менее 400px: */
body background-image: url('img_smallflower.jpg');
>

/* Для ширины 400px и больше: */
@media only screen and (min-width: 400px) body <
background-image: url('img_flowers.jpg');
>
>

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

Пример

/* Для устройств, менее чем 400px: */
body background-image: url('img_smallflower.jpg');
>

/* Для устройств 400px и больше: */
@media only screen and (min-device-width: 400px) body <
background-image: url('img_flowers.jpg');
>
>

HTML5 элемент

HTML5 представил элемент

который позволяет вам определять более одного изображения.

Поддержка браузерами

Пример




Flowers

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

Атрибут media является необязательным и принимает запросы мультимедиа, которые вы найдете в CSS @media правиле.

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

ПАЛИТРА ЦВЕТОВ

Получите ваш
Сертификат сегодня!

Связь с админом

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Адаптивные картинки в CSS3

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

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

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

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

adaptive images

adaptive images

При изменении расширения экрана, картинки тоже пропорционально уменьшались. Для всех картинок ставим ширину 100%.

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

Адаптивные картинки в CSS3.

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

После определенной ширины экрана, например 375 пикселей, в ряду должно остаться только 2 картинки.

В таблице стилей пишем следующий код:

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

Адаптивные картинки в CSS3.

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

Ниже приведен пример, что я имею ввиду.

Адаптивные картинки в CSS3.

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

Здесь вы узнаете, как сделать адаптивное изображение при помощи CSS.

Адаптивное изображение автоматически подстраивается под размер экрана.

Измените размер браузера, чтобы увидеть эффект адаптации изображения:

Природа

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

Шаг 1) Добавляем HTML:

Шаг 2) Добавляем CSS:

Если вы хотите, чтобы изображение при изменении размера браузера увеличивалось и уменьшалось, то установите CSS свойству width значение 100% и свойству height значение auto :

Если вы хотите, чтобы изображение при изменении размера браузера только уменьшалось, но никогда не увеличивалось больше своего оригинального размера, то используйте свойство max-width: 100% :

Шаг 2) Добавляем CSS:

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

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

Общее решение

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

Мы используем свойство max-width: 100% чтобы изображение никогда не выходило за пределы родительского контейнера (блока). Поэтому при изменении самого блока, в котором находится изображение, соответственно будет меняться размер самого изображения. А свойство height: auto; отвечает за то, чтобы сохранялась пропорциональность сторон изображения при масштабировании.

Адаптивность

Новое решение проблемы (адаптивное изображение) —

— это новый тег, который появился в версии HTML5. Он позволяет делать изображения адаптивными и его принцип работы похож на теги и .

    Он позволяет загружать разные изображения в зависимости от условий:
  • Результатов медиа запросов (media queries);
  • Плотности пикселей.
    Что это дает:
  • Загрузка самого оптимального и подходящего изображения;
  • Изображение может обрезаться в зависимости от формата экрана;
  • Загрузка больших по размеру изображений для мониторов с высоким разрешением.

Как работает тег

    Рассмотрим по шагам: Создаем открывающий и закрывающий тег

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

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

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

Использование

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

Если вы хотите уже сейчас пользоваться этим тегом и при этом чтобы он работал во всех браузерах — также есть для этого решение. Использование Javascript библиотеки Picturefill 2.0.

Picturefill 2.0

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

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

Вывод

Адаптивность сайта стала приоритетом при его создании. Ведь правильно создав структуру нет необходимости в отдельном создании мобильной версии сайта. Потому что шаблон сам будет подстраиваться под соответствующее разрешение. 🙂

Читайте также: