с использованием srcset и размера для переключения изображений и различных запросов к мультимедиа

Question

Я пытаюсь переключить отзывчивое изображение, когда оно переходит на мобильный, на данный момент я использую picturefill.js, а также srcset и размеры для переключения, однако изображения не переходят из кода, приведенного ниже.

<img srcset="/images/marketing/large.png 1190w, /images/marketing/mobile.png 320w" 
sizes="(min-width: 767px), (max-width: 768px)" 
alt="A rad wolf" 
class="img-responsive" /> 

Answer 1

Атрибут ваших размеров недействителен. С атрибутом size вы определяете ширину экрана вашего элемента изображения. И вы можете использовать условия мультимедиа для определения разных точек останова. Вы используете только медийные условия, но не добавляете размер.

Пример:

sizes="(min-width: 767px) 760px, 100vw"

Что означает, если окно просмотра больше, чем 767 отображается изображение в 760px в противном случае он имеет полное окно просмотра.

Кроме того, выполняется первое условие состояния, которое соответствует, поэтому вам не нужно смешивать минимальную ширину и максимальную ширину. Гораздо проще использовать максимальную ширину или минимальную ширину.

sizes="(min-width: 980px) 980px, 100vw"

Те же размеры, описанные с максимальной шириной:

sizes="(max-width: 980px) 100vw, 980px"

Вы также можете попробовать использовать lazySizes, который добавляет размеры автоматически.