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

Question

У меня есть такая вещь:

<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.

Моя проблема в том, что и Firefox, и Chrome (те 2, которые я сейчас тестирую) будут загружать только big.jpg даже на маленьких экранах. Проверено также на трассировке сети консоли.

Мой css устанавливает img в качестве основной жидкости:

img{
  display: block;
  max-width: 100%;
  height:auto;
}

Так что не так в моем коде?

Answer 1

Что касается I haz kode комментария I haz kode, ответ I haz kode: в моем коде отсутствует объявление модуля в медиа-запросах.

Что касается полноты, я также напишу здесь лучший код для моего варианта использования: наличие изображения по умолчанию для маленьких экранов и отличного от 840 пикселей вверх.

<picture>
  <source media="(min-width:840px)" srcset="big.jpg">
  <img srcset="small.jpg" alt="Foradori">
</picture>

Это будет работать правильно и загружать только правильное изображение для текущей точки останова. Также помните, что нам нужна картинка, чтобы обеспечить поддержку кроссбраузера.