Правильный пример srcset для тега img?

Question

[mihalich4040]

Подскажите, как составить правильно srcset для тег img, чтобы показывалась img400.jpg, когда max-width 400px, img700.jpg, когда max-width 700px, и img1000.jpg для всех остальных случаев и по умолчанию для IE. Не смог найти не одного подходящего решение и пояснения как с ним работать за весь день.

Answer 1

[Kovalsky]

Nx отражает отношение реальных пикселей к CSS пикселям (у ретины N = 2).
В частности, то что описываете вы достигается с помощью size descriptor.

Webkit demo, Мержевич по теме, соответствующий вопрос на StackOverflow

Answer 2

[Олег]

Смотри
Ширина экрана пользователя = a
Ширина картинки = b
Расчет a/b
Следовательно
400/200=2
700/200 = 3.5
1000/200 = 5

<img src="путь_к_картинке.jpg" srcset="img400.jpg 2x, img700.jpg 3.5x, img1000.jpg 5x">

Более 1000 - картинка по умолчанию
И на осла забей.

Comments

[mihalich4040]

спасибо. а откуда появилось число 200?

[Олег]

mihalich4040: Это для примера - ширина картинки )))

[mihalich4040]

Олег: ширина какой картинки из этого примера 200 я не совсем понимаю?))) самая маленькая 200?

[Олег]

mihalich4040: основная!
может быть любой ширины

[Алексей Скляров]

mihalich4040: человек просто взял случайное число, чтобы описать работу. вам нужно поспать, вы устали

[Олег]

img width="200px"