Адаптивные изображения на основе соотношения пикселей устройства

Меня смущают адаптивные изображения. Как соотношение пикселей устройства может повлиять на изображение при просмотре на мобильном устройстве.

У меня есть мобильное устройство с разрешением 480x854 с соотношением пикселей устройства 1,5, т.е. если я отправлю изображение шириной 320 пикселей (480/1,5), оно автоматически будет соответствовать ширине браузера, если мы указали область просмотра как,

<meta name="viewport" content="width=device-width, initial-scale=1">

Если я предоставляю изображение шириной 480 пикселей, оно выходит за пределы фактической ширины браузера. Но, если указать это,

<style>
    img {
        width: 100%;
    }
</style>

Оно отображается на 100% по ширине браузера с явно более высоким качеством, чем изображение размером 320 пикселей.

Итак, Каков возможный способ отображения изображения на основе соотношения пикселей устройства? Должен ли я отправлять изображение размером 320 или 480 пикселей (со 100%) для моего устройства?


javascript responsive-design viewport pixel-ratio
person user2538076    schedule 14.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Браузер позаботится обо всем необходимом масштабировании. Если у вас есть реальная ширина устройства 480 пикселей, виртуальная ширина 320 пикселей, которая содержит изображение, масштабированное до 100% (320 пикселей по виртуальной ширине), но изображение имеет ширину 480 пикселей, оно будет отображаться во всех 480 пикселей просто отлично, но программно будет быть измерено как 320px.

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

person Brad    schedule 15.03.2014