🏠 | 💻 IT | AWS |

HTML picture srcset sizes

При использовании тега picture может возникнуть следующее сообщение об ошибке

When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.

Скорее всего вы пытались загрузить несколько изображений разного разрешения но забыли вставить описание sizes.

Например, в следующем коде я для мобильной версии подгружаю две фото на выбор: 600 пикселей в ширину и 866 пикселей в ширину.

Кроме того, что нужно перечислить их в srcset:

srcset="photo--small-lr.jpg 600w, photo--small-hd.jpg 866w"

Нужно ещё указать их размер

sizes="(max-width: 600px) 480px, 800px"

И только потом закрывать тег

<figure class="figure1 mt8"> <picture itemscope itemtype="http://schema.org/ImageObject"> <source media="(max-width: 600px)" type="image/jpeg" srcset=" photo--small-lr.jpg 600w, photo--small-hd.jpg 866w" sizes="(max-width: 600px) 480px, 800px"> <source media="(min-width: 601px)" type="image/jpeg" srcset="photo--large.jpg"> <img class="w100" src="photo--small-lr.jpg" alt="изображение с сайта heihei.ru" itemprop="contentUrl"/> </picture> <figcaption> Фото: HeiHei.ru </figcaption> </figure>

Десять самых красивых норвежек Лене Нистрем изображение с сайта www.HeiHei.ru
Фото: HeiHei.ru

IT

Популярные статьи на сайте

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

Эти сайты могут иметь JavaScript, Yandex метрику или Google Analytics а также могут показывать рекламу.

Образование

Путешествия

Испания

Финляндия

Разное

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@eth1.ru если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Хотите помочь сайту материально
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......