HTML img srcset, не показывает маленькое изображение для мобильного - PullRequest
Новая
       28

HTML img srcset, не показывает маленькое изображение для мобильного

0 голосов
/ 07 декабря 2018

Мой код, показанный ниже, прекрасно работает на настольном компьютере, меняя изображения разных размеров при изменении размера окна.

Но он не работает, когда я открываю веб-сайт на мобильном телефоне.В мобильном браузере загружается изображение с именем 'xlg'.Вместо этого я хотел бы, конечно, загрузить изображение sm.

Может кто-нибудь сказать мне, где проблема?

Я тоже использовал 

<picture><source></source></picture>

но в этой ситуации я должен представить изображение таким образом. 

 <img 
      srcset="sm.jpg 768w,
              md.jpg 1024w,
              lg.jpg 1440w,
              xlg.jpg 1600w"
      sizes="(max-width: 768px) 768px,
             (max-width: 1024px) 1024px,
             (max-width: 1440px) 1440px,
             (min-width: 1441px) 1600px"
      src="sm.jpg"
      alt="">

Почему для мобильных устройств он показывает мне изображение xlg.jpg?Кто-нибудь знает?

Ответы [ 2 ]

0 голосов
/ 09 декабря 2018

Если я правильно понял ваш комментарий, то эти браузеры просто не поддерживают srcset.Если вы отметите caniuse , то увидите, что Opera Mini и браузер Android по умолчанию не поддерживают эту функцию.

Так что вы, вероятно, ищете что-то, что никогда не сможет работать.

0 голосов
/ 07 декабря 2018

Вы можете попробовать это для динамических изображений. Атрибут HTML srcset Этот пример правильно работает для меня в настольных и мобильных устройствах.

Исходя из примера, ваш код может выглядеть следующим образом: 

<picture>
    <source media="(min-width: 1440px)" srcset="xlg.jpg">
    <source media="(min-width: 1024px)" srcset="lg.jpg">
    <source media="(min-width: 768px)" srcset="md.jpg">
    <img src="sm.jpg" alt="" style="width:auto;">
</picture>
...