Как адаптировать картинку под разрешение экрана html
Перейти к содержимому

Как адаптировать картинку под разрешение экрана html

  • автор:

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

У меня есть web страница на которой размещен баннер.
Сейчас это div для которого я задала background.
Для элемента div я прописала свойства
width: 100%;
background-repeat: no-repeat;
background-size: cover;

и для разных разрешений экрана прописала media запрос, в котором указала конкретное изображение, например
media screen and (min-width: 1681px) .banner background: url(‘../img/1920×563.jpg’);
>
>
media screen and (min-width: 1601px) and (max-width: 1680px) .banner background: url(‘../img/1680×492.jpg’);
>
>
и т.д

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

  • Вопрос задан более трёх лет назад
  • 1937 просмотров

3 комментария

Оценить 3 комментария

Как адаптировать сайт под разные разрешения

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

Евгений Кучерявый

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

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

Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:

Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:

Встроенных настроек для этого нет, в отличие, например, от Telegram:

Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.

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

Создаём адаптивные стили

Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.

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

Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:

Также вы можете указать максимальную ширину в пикселях:

Создаём стили под отдельные разрешения

Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:

Обратите внимание, что блок с текстом для небольших экранов стал шире — это не тот случай, когда пустота красит страницу .

Автоматическое масштабирование

С помощью JavaScript мы можем проверить размер окна браузера пользователя и подключить тот файл стилей, который лучше подойдёт для страницы такого размера. Вот пример такого кода:

Заключение

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

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

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

  • JavaScript: главный инструмент frontend-разработчиков
  • Держи в курсе: как и где разработчики обновляют свои знания
  • Как установить локальный сервер на Windows

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

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

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

�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.

Метод описания плотности экрана

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

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

  • Реагировать на ретину — загружать разные картинки для разной плотности пикселей;
  • Реагировать на ширину вьюпорта — загружать разные картинки для разных медиавыражений;
  • Работать с новыми форматами изображений (AVIF и WebP).

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

Три размера картинки для разных устройств

1x , 2x , 3x — это идентификатор, который указывает плотность экрана для показа определённой картинки. Разработчик выбирает какие идентификаторы нужно указать для разных устройств.

Дескрипторы ширины, высоты и плотности

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

Дескриптор ширины (w — width descriptor) указывает ширину изображения или вьюпорта, для которого предназначено конкретное изображение. Измеряется в пикселях.

В этом примере medium.jpg имеет дескриптор 1000w , значит изображение предназначено для вьюпортов шириной 1000px, соответственно, large.jpg — изображение для вьюпортов шириной 2000px.

Дескриптор размера (x — pixel density descriptor) указывает отношение между шириной изображения и шириной вьюпорта. Он измеряется в вещественных числах без единицы измерения.

Здесь у medium.jpg дескриптор 1.5x , значит, ширина изображения в полтора раза больше ширины вьюпорта. У large.jpg ширина изображения в два раза больше ширины вьюпорта.

Дескриптор плотности пикселей (dppxdots per pixel descriptor) задаёт плотность пикселей изображения или экрана, для которого предназначена конкретная картинка. Он измеряется в пикселях на дюйм ( ppi ).

Дескриптор 1.5dppx означает, что изображение предназначено для устройств с плотностью 1.5 пикселя на дюйм. Изображение large.jpg подойдёт для устройств с плотностью 2 пикселя на дюйм, например, для планшетов, ноутбуков или мониторов с очень высоким разрешением.

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

Кадрирование изображений и тег

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

Пример одного логотипа для разных устройств

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

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

Атрибут media описывает условия, при которых будет загружаться соответствующее изображение. Например, media=»(min-width: 1200px)» означает, что изображение logotype-desktop.svg будет загружаться, если ширина экрана равна или больше 1200px .

  • В зависимости от условий задать нужное изображение;
  • Рассказать браузеру о наличии картинок в новых форматах и указать, какая из них подходит к вьюпорту;
  • Кадрировать картинку.

В конце добавляем элемент , который будет использоваться в случае, если браузер не поддерживает тег или не выполняется ни одно из условий, определённых в тегах . Здесь указываем путь к изображению img/logotype-phone.svg и добавляем альтернативный текст с помощью атрибута alt .

      

Материалы по теме

  • Как изменить ширину элемента. Свойство width
  • Как создавать адаптивные сетки
  • Как добавить изображение на страницу

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

адаптация картинки под размер экрана css

Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так: img При больших размерах экрана (ПК) все выглядит хорошо. При низких разрешениях экрана (мобильный телефон, 320 на 240 px) картинку увеличивает БОЛЬШЕ своего собственного размера. Например, если картинка 100 px по ширине, ее растянет на 320 px по ширине, искажая качество. Надо сделать так, чтобы картинка не увеличивалась больше своего собственного физического размера.

На сайте с 24.12.2009
5 февраля 2015, 17:39
max-width: 100%
Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
На сайте с 12.02.2013
5 февраля 2015, 17:51

Не помогает. И, как я понимаю, не должно. Но если задавать max-width: 100px уменьшает картинку до 100px, но это не вариант решения. Картинка может больше быть 100px, или меньше.

На сайте с 24.12.2009
5 февраля 2015, 22:16
Я надеюсь вы убрали width.

.erb-image-wrapper img < 
max-width:100% !important;
height:auto;
display:block;
>

На сайте с 05.03.2009
8 февраля 2015, 20:12

acril1994:
Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так:

При больших размерах экрана (ПК) все выглядит хорошо.

При низких разрешениях экрана (мобильный телефон, 320 на 240 px) картинку увеличивает БОЛЬШЕ своего собственного размера. Например, если картинка 100 px по ширине, ее растянет на 320 px по ширине, искажая качество.

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

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

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