Почему некорректно работает тег picture?

Question

[Нина]

Почему-то не отображаются картинки на странице в теге picture для source media="(min-width: 1200px)" и source media="(min-width: 768px)"

<picture">
            <source  media="(min-width: 1200px)" srcset="img/photo-desktop.jpg, img/[e-mail] 2x">
            <source  media="(min-width: 768px)" srcset="img/photo-tablet.jpg, img/[e-mail] 2x">
            <img srcset="img/photo-mobile.jpg, img/[e-mail] 2x" alt="Фотографии гостей" width="280" height="280">
          </picture>

Отображается только картинка для мобильной версии, которая находится в теге img:

<img srcset="img/photo-mobile.jpg, img/[e-mail] 2x" alt="Фотографии гостей" width="280" height="280">

А при увеличении разрешения экрана эта картинка (для мобильных разрешений) просто растягивается на всю ширину экрана. А если я ее закомментирую, - то не отображается ничего. Подскажите, пожалуйста, где у меня ошибка?

Answer 1

[L1nks]

Попробуйте добавить 1х после пути к изображению и проверить наименование файлов для планшета и десктопа еще раз, возможно они называются [e-mail] или как то так

<source  media="(min-width: 1200px)" srcset="img/photo-desktop.jpg 1x, img/[e-mail] 2x">
 <source  media="(min-width: 768px)" srcset="img/photo-tablet.jpg 1x, img/[e-mail] 2x">

Comments

[Нина]

Проверяла пути, - все правильно написано. И добавление 1 x не помогает.

[L1nks]

Нина, а выложенный проект есть на github pages?

[L1nks]

Нина, Скорее всего из-за того что у вас кавычка в теге

[Нина]

L1nks, спасибо! Теперь, вроде, все в порядке! Вы мне очень помогли1