Question

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

所以，我的问题是：有没有办法通过使用CSS（或不太有利的JavaScript）来实现一个恒定（实际）大小的图像？是否可以确定尺寸并且不允许其变大或变小？

Answer 1

我相信你想要的是设置视口的恒定比例。将此添加到您的<head>：

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

Answer 2

您可以将图像封装在div中，如下所示：

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

然后使用CSS设置div的大小和图像的位置：

#imageDiv {
    height: 500px;
    width: 500px;
    overflow: hidden;
}

.imageclass {
    position: absolute;
}

这应该在所有设备上保持相同的大小。