Подробное объяснение элемента изображения в HTML5 и адаптивной обработки изображений.

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

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

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

 <стиль> img {максимальная ширина: 100%; высота: авто </style>;

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

Таким образом, когда мы получаем доступ к изображениям на адаптивной веб-странице на мобильном устройстве, мы только масштабируем разрешение изображения и загружаем большое изображение на ПК. Это не только тратит трафик и пропускную способность, но и замедляет работу веб-страницы. Скорость открытия серьезно влияет на пользовательский опыт.

1. <picture> — новый элемент HTML5;
2. Если элемент <picture> взаимодействует с текущими элементами <audio> и <video>, это улучшит процесс работы с адаптивными изображениями. Это позволяет устанавливать внутри него несколько тегов <source> для указания различных условий загрузки изображений. ;
3. <picture> может загружать разные изображения в соответствии с разными условиями. Этими условиями могут быть текущая высота окна (viewport), ширина (width), направление (orientation), плотность пикселей (dpr) и т. д.;

В следующем каштане разные изображения загружаются для разной ширины экрана: minpic.png загружается, когда ширина страницы составляет от 320 до 640 пикселей; middle.png загружается, когда ширина страницы превышает 640 пикселей.

 <picture> <source media=(min-width: 320px) и (max-width: 640px) srcset=img/minpic.png> <source media=(min-width: 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(минимальная ширина: 320 пикселей) и (максимальная ширина: 640 пикселей) и (ориентация: альбомная) srcset=img/minpic_landscape.png> <source media=(минимальная ширина: 320 пикселей) и (максимальная ширина: 640 пикселей) и (ориентация: книжная) srcset=img/ minpic_portrait.png> <source media=(минимальная ширина: 640 пикселей) и (ориентация: пейзаж) srcset=img/middlepic_landscape.png> <source media=(минимальная ширина: 640 пикселей) и (ориентация: портрет) srcset=img/middlepic_portrait.png> <img src=img/picture.png <source media = (минимальная ширина: 320 пикселей) и (максимальная ширина: 640 пикселей) srcset=img/minpic.png,img/minpic_retina.png 2x> <source media=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <тип источника=image/webp srcset=img/picture.webp> <img src=img/picture.png size=90vw srcset=picture-160.png 160w, image-320.png 320w, image-640.png 640w, image-1280.png 1280w>

6. Добавьте атрибут размеров в следующем примере; загрузите соответствующую версию изображения, когда ширина окна больше или равна 800 пикселей;

 <source media=(min-width: 800px) size=90vw srcset=picture-landscape-640.png 640w, image-landscape-1280.png 1280w, image-landscape-2560.png 2560w><img src=picture-160 Размеры .png = 90vw srcset=picture-160.png 160w, image-320.png 320w, image-640.png 640w, image-1280.png 1280w>

совместимость:

В настоящее время только Chrome, Firefox и Opera имеют хорошую совместимость с ним. Конкретная совместимость показана на рисунке:

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

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

Как видно из приведенного выше примера кода, без использования js и сторонних библиотек и без включения медиа-запросов в CSS элемент <picture> может объявлять адаптивные изображения, используя только HTML;

Сам тег <picture> не имеет атрибутов. Волшебная часть заключается в том, что <picture> используется как контейнер для <source>.

Элемент <source>, который используется для загрузки мультимедиа, например видео и аудио, был обновлен для загрузки изображений, и были добавлены некоторые новые атрибуты:

Принимает один путь к файлу изображения (например: srcset=img/minpic.png).

Или это путь к изображению, разделенный запятыми, описываемый плотностью пикселей (например: srcset=img/minpic.png, img/minpic_retina.png 2x). Описание 1x не используется по умолчанию.

Принимает любой проверенный медиа-запрос, как вы можете видеть в селекторе CSS @media (например, media=(min-width: 320px)).

Он использовался в предыдущем примере синтаксиса <picture>.

Получите одно описание ширины (например: size=100vw) или одно описание ширины медиазапроса (например: size=(min-width: 320px) 100vw).

Или описания ширины медиа-запроса, разделенные запятыми (например: size=(min-width: 320px) 100vw, (min-width: 640px) 50vw, Calc(33vw - 100px)) Последний используется по умолчанию.

Принимает поддерживаемые типы MIME (например: type=image/webp или type=image/vnd.ms-photo).

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

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

Используйте <img>, чтобы объявить отображение изображения по умолчанию. Поместите тег <img> в конец <picture>, и браузер проигнорирует объявление <source>, прежде чем найти тег <img>. Этот тег изображения также требует, чтобы вы написали его атрибут alt.

Эта статья основана на многих других статьях. Все введение в картинку находится здесь, так что давайте попробуем прямо сейчас~

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