Описание тега picture-element

Элемент изображения относится к элементу изображения HTML5.
2 ответа

HTML5 srcset, размеры и художественное направление

Насколько я могу судить, srcset а также sizes Атрибуты больше фокусируются на применении подходящего масштабированного изображения для размера и разрешения устройства. По-видимому, нет возможности использовать эти атрибуты для выбора альтернативного…
1 ответ

Каковы плюсы и минусы элемента изображения?

Каковы плюсы и минусы HTML5 picture элемент? В частности, загрузит ли браузер все изображения? Или браузер загружает только изображение, соответствующее медиа-запросу?
09 июн '15 в 07:25
1 ответ

HTML-элемент изображения, не поддерживающий небольшой медиа-запрос

У меня есть такая вещь: <picture> <source media="(min-width:1200)" srcset="big.jpg"> <source media="(min-width:840)" srcset="small.jpg"> <img srcset="big.jpg" alt="Test" /> </picture> Я также использую picturefill. Моя …
1 ответ

Как посмотреть формат webp на ie11

Есть ли способ просмотреть формат изображения webp на IE11 или можно конвертировать его в другой формат с помощью кода javascript в этом браузере? Я попробовал элемент "picture", но кажется, что он не может работать как Chrome62
0 ответов

Объедините медиа и введите запросы в теге источника html5

Это мой первый вопрос о переполнении стека, хотя я давно использовал переполнение стека для помощи. Чтобы все было коротко. Я хочу знать, возможно ли написать разметку, где я комбинирую медиа и набираю вопросы в теге источника html5. Разметка, котор…
2 ответа

Есть ли атрибут 'alt' для тега <picture>? - Вариант использования: элемент изображения без <img src = "">

Я использую &lt;picture&gt; теги. Моя целевая группа использует современные браузеры, поэтому, как только Firefox поддерживает WebP, нет необходимости использовать &lt;img&gt; тег. Сейчас: &lt;picture&gt; &lt;source srcset="image-200px.webp 1x, imag…
2 ответа

Почему src внутри элемента <picture> не загружается?

&lt;picture&gt; &lt;source type="image/webp" srcset="images/me.webp"&gt; &lt;img id="avatar" src="images/me.webp" alt="Me"&gt; &lt;/picture&gt; Когда я использую picture элемент, браузер (Chrome) не загружает изображение с другими ресурсами. Тем не …
20 дек '18 в 23:17
1 ответ

Как определить разметку микроданных для изображения, когда на самом деле это тег изображения?

В рамках http://schema.org/Product я хочу определить разметку для изображения. Обычно это выглядит следующим образом: &lt;img itemprop="image" src="/path-to-image.suffix" alt="image-description" /&gt; Однако современные адаптивные страницы использую…
21 фев '19 в 15:35
1 ответ

Устанавливает ли атрибуты `width` и`height` в <picture> или его <img> что-нибудь?

Я хочу начать использовать WebP на моем сайте. Я конвертирую код, который выглядит так: &lt;img src="example.jpg" width="100" height="100" alt="Example"&gt; Чтобы код был похож на это: &lt;picture&gt; &lt;source srcset="example.webp" type="image/web…
10 янв '18 в 18:21
2 ответа

Адаптивные изображения элементов изображения не работают с угловым 4

Элемент изображения как &lt;picture&gt; &lt;source media="(max-width: 768px)" srcset="../assets/image1.png"&gt; &lt;source media="(min-width: 769px)" srcset="../assets/image2.png"&gt; &lt;source src="../assets/image3.png"&gt; &lt;/picture&gt; не раб…
2 ответа

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

Допустим, у вас есть элемент изображения, похожий на этот: &lt;picture class='my-image'&gt; &lt;source media="(min-width: 1024px)" srcset="large.jpg"&gt; &lt;source media="(min-width: 768px)" srcset="med.jpg"&gt; &lt;source srcset="small.jpg"&gt; &l…
0 ответов

JavaScript и элемент изображения для создания наведения на разные точки останова

У меня есть элемент изображения: &lt;picture&gt; &lt;source media="(max-width: 767px)" srcset="images/home-page/mobile/mobile_no_hover.jpg?$staticlink$, images/home-page/mobile/mobile_no_hover@2x.jpg?$staticlink$ 2x" /&gt; &lt;source media="(min-wid…
01 ноя '18 в 22:39
2 ответа

Элемент изображения: мне нужно установить полный путь в каждом атрибуте scrset?

Адаптивные изображения, варианты использования и новый HTML5 picture Элемент объясняется довольно хорошо в этой статье. Обновление: если быть более точным, я имею в виду адаптивные изображения, изображения с измененным размером для различных устройс…
05 июл '15 в 09:33
0 ответов

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

Предполагая, что у меня есть изображение в моем HTML-коде, и я хотел бы показать спиннер, пока изображение загружается. Я мог бы сделать это, загрузив изображение в JavaScript и после загрузки скрыть счетчик, например: async loadImage(src) { return …
06 авг '19 в 12:40
0 ответов

Отслеживайте точку на нескольких фотографиях в r

Я извлек несколько последовательных кадров из видео, содержащего одно человеческое лицо. Я хочу разместить точку на кончике носа на первой фотограмме, и я хотел бы найти способ, как отследить эту же точку (соответствующую кончику носа) на всех следу…
08 ноя '19 в 01:31
1 ответ

В Chrome currentSrc элемента img иногда бывает пустым. Как я могу предотвратить это?

ОБНОВИТЬ: Я только что нашел дополнительную информацию. Кажется, что в Chrome currentSrc изображения часто будет пустым, тогда как в Firefox URL-адрес всегда правильный. JS пытается получить доступ к currentSrc до того, как он станет доступен? Есть …
0 ответов

Тег источника в элементе изображения не принимает локальный путь в HTML

&lt;picture&gt; &lt;source media=&quot;(min-width: 900px)&quot; srcset=&quot;Data for Practice/Random 6.jpg&quot; style=&quot;width: 100px;height: 200px;&quot; alt=&quot;Random 6&quot;&gt; &lt;img src=&quot;Data for Practice/Random 5.jpg&quot; style…
23 окт '20 в 10:27
0 ответов

элемент изображения не отображается в Chrome Версия 86.0 для iOS Catalina

Мой подход очень прост, я пытаюсь использовать элемент изображения для обработки отката для изображений webp следующим образом: &lt;html&gt; &lt;body&gt; &lt;picture&gt; &lt;source srcset=&quot;logo-2x.webp 1x,logo-2x.webp 2x&quot; type=&quot;image/…
30 окт '20 в 09:46
1 ответ

Адаптивный элемент изображения загружает изображение правильного размера из srcset

На основе тега изображения ниже, как браузер определяет, какой из трех файлов в атрибуте srcset загрузить? Насколько я понимаю, браузер определит, какой из трех (300 пикселей, 600 пикселей или 800 пикселей), в зависимости от ширины области просмотра…
24 ноя '20 в 17:31
1 ответ

Не удалось загрузить ресурс: сервер ответил статусом 404 (), но при посещении URL-адреса напрямую отображается изображение

У меня странная проблема, когда браузер сообщает, что сервер возвращает 404 на изображении. Однако при посещении URL-адреса изображение отображается напрямую. Изображение находится внутри &lt;picture&gt;элемент, который загружается в несколько друго…
23 фев '21 в 01:28