Я хочу знать, как можно использовать атрибут HTML srcset img в моих мобильных приложениях. Или есть ли другой плагин jQuery, который помогает мне решить проблему разрешения изображений.
<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
Короче говоря, Srcset - это новый атрибут, который позволяет вам указывать разные типы изображений для разных размеров экрана/ориентации/типов отображения. Использование действительно просто, вы просто предоставляете множество разных изображений, разделяя их запятой следующим образом: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. Вот пример: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"
Это более длинный ответ, который объясняет вещи более подробно.
Разница между srcset и изображением. Оба Srcset и picture делают примерно одни и те же вещи, но есть тонкая разница: picture определяет, какое изображение должен использовать браузер, тогда как Srcset дает браузеру выбор. Для выбора этого выбора можно использовать много вещей, таких как размер видового экрана, предпочтения пользователей, состояние сети и т.д. Поддержка Srcset довольно хороша и почти все текущие браузеры поддерживают ее более или менее. Ситуация с элементом picture - это немного хуже.
Дескрипторы - это просто способ показать, какой образ скрыт за ресурсом. Существуют различные типы дескрипторов:
srcset="image.jpg, image-2X.jpg 2x"
Значения плотности дисплея - 1x, 2x и т.д. - называются дескрипторами плотности отображения. Если дескриптор плотности отображения не указан, предполагается, что он равен 1x. Хороший вариант для показа сетчатки.srcset="image-240.jpg 240w, image-640.jpg 640w". Я уверен, что это самоочевидно. Единственная проблема заключается в том, что сам по себе дескриптор ширины не очень полезен. Почему? прочитайте здесьsrcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. Инструкции для браузера будут выглядеть так: (max-width: 480px) 100vw - если область просмотра имеет ширину 480 пикселей или меньше, изображение будет составлять 100% ширины окна просмотра. (max-width: 900px) 33vw - если видовое окно имеет ширину 480 пикселей или меньше, это правило никогда не будет достигнуто из-за предыдущего состояния медиа. И 254px - это когда нет никаких условий для мультимедиа, длина считается значением по умолчанию, используемым, когда ни одно из других условий мультимедиа не выполняется.Только для полноты добавим здесь, что есть атрибут image-set() для фонового изображения в CSS и некоторая другая полезная ссылка здесь
Вот хорошая статья по атрибуту srcset и как его использовать. srcet позволяет вам объявлять набор изображений для отображения в разных размерах видового экрана. Вам просто нужно сохранять и отображать изображения с разными разрешениями, например. banner-phone-HD.jpeg будет самым высоким разрешением.
Exmaple:
<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
Вышеупомянутое будет обслуживать banner-phone.jpeg для устройств с шириной окна просмотра под 640px, banner-phone-HD.jpeg для небольших устройств с высоким разрешением DPI, banner-HD.jpeg для устройств с высоким разрешением DPI с экранами более 640 пикселей и banner.jpeg ко всему остальному.
Существуют также другие методы, такие как CSS-медиа-запросы, которые вы можете использовать для получения того же эффекта.
Мне не известно о каких-либо плагинах JQuery, которые помогли бы с этим.