srcset и ширина видового экрана

Question

У меня есть 2 изображения: одна настольная версия, одна мобильная версия. Я хотел бы на рабочем столе изображение, которое будет заменено мобильным изображения, когда ширина окна изменяет размер ниже 480px, так же, как бы со следующими CSS со свойством фонового изображения:

.logo { background-image: url(http://placehold.it/400x200&text=desktop); } 
media screen and (max-width: 480px) { 
    .logo { background-image: url(http://placehold.it/300x150&text=mobile); } 
} 

Я думал, что я мог бы добиться этого с srcset атрибут HTML:

<img src="http://placehold.it/400x200&amp;text=desktop" alt="" srcset="http://placehold.it/300x150&amp;text=mobile 480w"> 

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

Можно ли добиться такого поведения с помощью srcset?

Answer 1

Похоже, что вы хотите сделать «направление искусства», то есть изображения отличаются друг от друга больше, чем меньшая уменьшенная версия большего изображения. Если это так, вам нужно использовать элемент picture.

<picture> 
<source srcset="http://placehold.it/300x150&amp;text=mobile" 
     media="(max-width: 480px)"> 
<img src="http://placehold.it/400x200&amp;text=desktop" alt="..."> 
</picture> 

Однако, если ваше маленькое изображение фактически уменьшенная версия большего изображения, то вы можете использовать srcset, но тогда вы не имеете никакого контроля над которым получает выбранное изображение. Это до браузера, чтобы выбрать лучший в зависимости от плотности экрана, сети, предпочтения пользователя, кэша браузера и т.д.

<img src="http://placehold.it/400x200&amp;text=desktop" 
    srcset="http://placehold.it/400x200&amp;text=desktop 400w, 
      http://placehold.it/300x150&amp;text=mobile 300w" 
    sizes="(max-width: 480px) 300px, 400px"> 

Примечание: Если srcset используется и чем больше кандидат изображение находится в кэше, Chrome будет всегда отображать этого кандидата в кешированном изображении - независимо от фактического размера видового экрана.