Автоширинное изображение с атрибутом `srcset` - PullRequest
Новая
       6

Автоширинное изображение с атрибутом `srcset`

0 голосов
/ 10 декабря 2018

Скажите, у меня есть следующее изображение: 

<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w">

Похоже, что атрибут sizes, который я не включил, по умолчанию равен 100vw, поэтому маленькое изображение масштабируется до ширины области просмотра.

Что мне делать, если я не хочу этого поведения, но вместо этого хочу, чтобы изображение по умолчанию имело свой собственный размер?

Я бы ожидал, что это изображение по умолчанию будет иметь ширину 100 пикселей на обычном дисплее,и 50px на 2x (сетчатка) дисплее.

Если я укажу свой собственный атрибут sizes для 100px, это не решит проблему его отображения на 50px на дисплее сетчатки.

Причина, по которой мне нужно такое поведение, заключается в том, что в моей системе пользователям разрешено загружать изображения любого размера и размещать их на странице, и я генерирую srcset с несколькими шагами до максимального размераих изображение, и мне нужен способ, чтобы изображение отображалось с правильной шириной, учитывая размер изображения и плотность пикселей на экране пользователя.

Можно ли добиться такого поведения для изображений с автоматической шириной, используя srcset?

В своем исследовании я обнаружил эту статью , которая непосредственно касается этой проблемы.Автор рекомендует добавить атрибут width с максимальным размером изображения, чтобы вернуть то, что атрибут sizes делает к собственному размеру изображения.Однако он не рассматривает, как заставить это работать с различной плотностью пикселей.

1 Ответ

0 голосов
/ 11 декабря 2018

К сожалению, кажется, что нет способа получить изображение с srcset по умолчанию его естественным размером с учетом DPR.Атрибут sizes, который по умолчанию равен 100vw, если он не установлен на изображении с srcset, переопределяет внутреннюю ширину изображения, и, похоже, нет способа сбросить его, не задавая явную ширину самостоятельно.

В моей конкретной ситуации я обнаружил, что мы уже храним DPR пользователя в файле cookie, поэтому на стороне сервера я начал устанавливать атрибут width для изображений, чтобы максимальная ширина изображения делилась на пользователяDPR.Это предотвращает отображение изображения больше исходного размера и обеспечивает соответствующий размер изображения для устройств с высокой плотностью пикселей.

Конечно, вы, вероятно, захотите объединить это с max-width: 100%; вВаш CSS, чтобы изображение не отображалось больше, чем его контейнер.

Пример решения: 

<!-- Width generated server-side for standard displays: -->
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w" width=100>

<!-- Width generated server-side for displays with a DPR of 2: -->
<img src="//picsum.photos/100" srcset="//picsum.photos/100 100w" width=50>
...