Почему srcset изменяет размер изображения?

Question

У меня странное поведение с использованием srcset, и я с трудом понимаю это. Я сделал CodePen: http://codepen.io/anon/pen/dYBvNM

Проблема в том, что у меня есть набор изображений (которые Shopify генерирует) различных размеров: 240px, 480px, 600px и 1024px. Проблема в том, что это максимальные размеры. Это означает, что если продавец загружает меньшее изображение (скажем, 600 пикселей), версия 1024px будет равна 600px, а не 1024px. Я не могу знать, что заранее, так что я вынужден просто добавить все размеры, как «лучший случай»:

<img 
    src="my_1024x1024.jpg" 
    srcset="my_240px.jpg 240w, my_480px.jpg 480w, my_600px.jpg 600w, my_1024px 1024w" 
    sizes="(max-width: 35em) 100vh, 610px" 
    > 

странность происходит, когда изображение действительно меньше ожидаемого максимального размера. В этом случае браузер правильно выбирает подходящее изображение (в этом случае он будет выбирать версию 1024 на 15-й сетчатке), но поскольку изображение на самом деле меньше 1024 пикселей (размер, который я указал), браузер фактически уменьшает размер изображения, меньшего, чем его собственное разрешение.

Вы можете сравнить в CodePen http://codepen.io/anon/pen/dYBvNM, что эти два изображения являются версией 1024px, но в том случае, когда используется srcset, рендеринг на самом деле меньше, чем с src. Я бы ожидал, что он оставит изображение в собственном разрешении.

Не могли бы вы объяснить, почему?

Чин!

Answer 1

Как это работает, дескрипторы 'w' вычисляются в дескрипторы 'x' путем деления данного значения на эффективный размер из атрибута sizes. Так, например, если выбрано 1024w, а размер 610px, то 1024/610 = 1.67868852459016x, и это плотность пикселей изображения, которое будет применяться браузером. Если тогда изображение не будет на самом деле шириной 1024 пикселя, браузер все равно будет применять эту же плотность, которая «сжимает» изображение, потому что это правильная вещь в действительном случае, когда ширина изображения и дескриптор w ,

Необходимо, чтобы дескрипторы соответствовали ширине ресурса. Когда пользователь загружает изображение, вы можете проверить его ширину и использовать его как самый большой дескриптор в sizes (если он меньше 1024) и удалить дескрипторы, которые больше заданной ширины изображения.