Можно ли реализовать загрузку фото разных размеров в зависимости от занимаемого пространства?

Question

[Диман Суворкин]

В HTML есть элемент picture, который позволяет загружать фото разных размеров в зависимости от экрана окна, а не от фактического занимаемого пространства. Как-то так:

<picture>
 <source srcset="https://goo.gl/mQqfQa" media="(max-width: 320px)">
 <source srcset="https://goo.gl/Mv2KWH" media="(max-width: 1920px)">
 <img srcset="https://goo.gl/Mv2KWH">
</picture>

Это работает, ок. Но что, если я хочу поставить рядом (в строку) несколько фото? И чтобы при этом, например, на экране 1200px для 3 фото, расположенных в ряд, грузились изображения размером 400px, а не 1200? Без использования js никак?

Comments

[smilingcheater]

Что вам мешает на правило max-width: 1200px отдавать картинки шириной 400px?

[Ankhena]

И чтобы при этом, например, на экране 1200px для 3 фото, расположенных в ряд, грузились изображения размером 400px, а не 1200?

Так и пишете подряд 3 тега picture, в которых для media="(max-width: 1200px)" задаете картинки шириной в 400px,
а для для media="(max-width: 1800px)" задаете картинки шириной в 600px
и т.д.