1

我一直在使用 Chrome 和 Firefox 开发工具测试不同的 DPR，似乎更改 DPR 对最终渲染没有明显影响。

我尝试了多个测试用例，包括真实照片和插图。我确保我使用的图像的分辨率明显低于在 2x 或 3x 显示器上呈现的分辨率。请参阅下面的示例并使用 Chrome 或 Firefox 开发工具中的响应工具来更改 DPR。我将图像的宽度设置为500pxCSS。图像的固有分辨率为 520 x 720 像素。因此，在@3x 设备上，它应该将该图像缩放到 1500 像素宽，使其看起来模糊。

我的显示器是否需要支持 3.0 像素比率才能模拟它？

body {
  background: #dddddd;
}

img {
  width: 500px;
  height: auto;
}
<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">

4

1 回答 1

0

我相信你正在寻找

body {
  background: #dddddd;
}

img {
  width: 100%;
  height: auto;
}

我想就这样？它会放大照片，要阻止它放大，您必须使用 max-width/max-height 并将其设置为您希望它在 %tage 自行关闭之前达到的最高值。

于 2020-08-15T01:27:52.090 回答