固定的图像大小，尽管设备像素比率

Fixed image size despite device pixel ratio

本文关键字：像素 比率 图像      更新时间：2023-09-26

我正试图找到一种方法，使所有设备/浏览器的图像大小相同（实际为250像素）。我的问题是设备像素比。在设备像素比大于1的设备上，图像显示得很小，当你放大时，它会变大（如果你放大到普通浏览器，也会发生同样的情况）。

所以，我的问题是：有没有一种方法可以通过使用CSS（或者不太好的JavaScript）来实现恒定（实际）大小的图像？有没有可能固定尺寸，不让它变大或变小？

我相信您想要的是设置视口的一致比例。

将其添加到您的<head>:

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

您可以将图像封装在如下的div中：

<div id='imageDiv'><img src='theImage.png' class='imageclass' /></div>

然后用CSS设置div的大小和图像的位置，如下所示：

#imageDiv {
    height: 500px;
    width: 500px;
    overflow: hidden;
}
.imageclass {
    position: absolute;
}

这将使它在所有设备上保持相同的大小。

相关文章：