атрибут размеров не работает для разных источников в srcset - PullRequest
Новая
       5

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

0 голосов
/ 26 сентября 2018

Я использую адаптивные изображения по атрибутам srcset и sizes в <img>.У меня есть 3 изображения с 3 различными размерами (200x200, 400x400, 600x600).Мне нужно переключить их для разных размеров области просмотра следующим образом: 

viewport size 1190px -> image size 555px
viewport size 991px -> image size 300px
viewport size 575px -> image size 130px
Any other viewport size -> image size 255px

, чтобы сделать это, я закодировал это следующим образом: 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>responsive test</title>
</head>
<body>
    <img    src="Go-400_x_400.jpg"
            srcset="Go-200_x_200.jpg 200w,
                    Go-400_x_400.jpg 400w,
                    Go-600_x_600.jpg 600w"
            sizes=" (max-width:575px) 131px,
                    (max-width:991px) 300px,
                    (max-width:1199px) 555px,
                    255px"
            alt="responsivetest" >
</body>
</html>

Как определение, для разных размеров медиа-запрос долженвыберите подходящее изображение из srcset для каждого размера.Я ожидаю изображение 200x200 для максимальной ширины: размер 575px, изображение 400x400 для максимальной ширины: размер 991px и изображение 600x600 для максимальной ширины: размер 1191px.Но для всех размеров будет загружено только изображение 600x600 без смещения изображений.Как мне это решить?

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

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

0 голосов
/ 26 сентября 2018

Вам известен тег html5 picture ?

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

<picture>
  <source media="(min-width: 650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
  <img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

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

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

Примечание: Элемент изображения не поддерживается в IE12и раньше или Safari 9.0 и ранее.

...