Отзывчивый IMG для поддержания размера окна просмотра и соотношения пикселей устройства - PullRequest
Новая
       13

Отзывчивый IMG для поддержания размера окна просмотра и соотношения пикселей устройства

0 голосов
/ 06 ноября 2019

Мне нужно использовать <img> НЕ <picture>, чтобы обеспечить разные размеры изображения как для размера области просмотра, так и для отношения пикселей устройства. Пример (код недействителен): 

<img srcset="store/img-200.jpg 180w, store/img-200.jpg 180w 2x">

Есть ли обходные пути для этого?

1 Ответ

0 голосов
/ 06 ноября 2019

Я остановился на добавлении дополнительных переменных области просмотра. 

<img srcset="https://myserver.com/image?w=800&h=400 800w,
        https://myserver.com/image?w=1200&h=600 1200w,
        https://myserver.com/image?w=1600&h=800 1600w,
        https://myserver.com/image?w=2000&h=1000 2000w,
        https://myserver.com/image?w=2400&h=1200 2400w,
        https://myserver.com/image?w=2800&h=1400 2800w,
        https://myserver.com/image?w=3200&h=1600 3200w"
sizes="100vw">

Изображение будет загружено браузером для нескольких конфигураций:

  • плотность экрана 1 с шириной области просмотра, равной или ниже 2400px
  • плотность экрана 2 сширина области просмотра равна или меньше 1200px
  • плотность экрана 3 с шириной области просмотра равной или ниже 800px
...