Адаптивные изображения ‹picture› с запасным вариантом

Я пытаюсь использовать элемент <picture> для предоставления 3 разных изображений: 1 для мобильных устройств, 1 для min-width: 768px и 1 для IE в качестве запасного варианта.

<picture>
  <source class="article-bg-image" media="(min-width: 768px)" srcset="tablet-desktop.jpg" alt="Text" title="Text">
  <img class="img-responsive" srcset="mobile.jpg" alt="Text" title="Text">
</picture>

Это работает, как и ожидалось, на мобильных устройствах и на настольных компьютерах, но я не хочу, чтобы мобильное изображение использовалось в качестве запасного варианта в IE. Как я могу предоставить изображение для мобильных устройств? Я попробовал второй source без атрибута media, но он не использовался.

Заранее спасибо!


person Mario Parra    schedule 30.11.2017    source источник


Ответы (1)


Вы можете попробовать этот способ

  <img src="mobile.jpg" class="img-responsive" srcset="large.png 1280w,medium.png 640w, small.png 320w" sizes="100%" alt="Text" title="Text">
 

person MD.ALIMUL Alrazy    schedule 30.11.2017