基于设备像素比的响应图像

Question

我对响应式图像感到困惑。设备像素比如何影响在移动设备上观看的图像。

我有一个分辨率为480x854的移动设备，设备像素比为1.5，也就是说，如果我发送一个宽度为320px(480/1.5)的图像，它将自动适应浏览器的宽度，只要我们指定视口为，

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

如果我提供一个宽度为480px的图像，它会超出浏览器的实际宽度。但是，如果指定了

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

显示在浏览器宽度的100%内，质量明显高于320px的图片。

那么，基于设备像素比显示图像的可行方法是什么?我必须为我的设备发送320px或480px(100%)的图像吗?

Answer 1

浏览器会处理所有需要的缩放。如果你的实际设备宽度为480px，虚拟宽度为320px，其中包含缩放到100%的图像(虚拟宽度为320px)，但图像是480px宽，它将在所有480px中显示，但编程将被测量为320px。

如今，试图获得像素完美的图像几乎没有意义。有许多设备具有许多分辨率。发送一个质量不错的图像，让浏览器为你做这项工作。