HTML Как правильно загружать большие изображения в соответствии с шириной и соотношением пикселей устройства? - PullRequest
Новая
       13

HTML Как правильно загружать большие изображения в соответствии с шириной и соотношением пикселей устройства?

0 голосов
/ 04 мая 2020

Теперь у меня есть это, которое загружает изображения с разной шириной, но я также хочу, чтобы он загружал изображения с разным соотношением пикселей 

<img srcset="
  ../../../../assets/images/hero/hero-extra-small.png 425w,
  ../../../../assets/images/hero/hero-small.png 768w,
  ../../../../assets/images/hero/hero-medium.png 1024w,
  ../../../../assets/images/hero/hero-large.png 1440w,
  ../../../../assets/images/hero/hero-extra-large.png 1920w
  " src="../../../../assets/images/hero/hero-extra-large.png"
  loading="lazy" alt="Landing image">

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

<img srcset="
  ../../../../assets/images/hero/hero-extra-small@1x.png,../../../../assets/images/hero/hero-extra-small@2x.png, ../../../../assets/images/hero/hero-extra-small@3x.png  425w,
  ../../../../assets/images/hero/hero-extra-small@1x.png,../../../../assets/images/hero/hero-extra-small@2x.png, ../../../../assets/images/hero/hero-extra-small@3x.png  768w,
  loading="lazy" alt="Landing image">

Каков наилучший способ достижения того, что я хочу?

...