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