🏠 | 💻 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

Поиск по сайту

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