我试图找到一种方法，在所有设备/浏览器中具有相同的大小（实际250像素）的图像。我的问题是设备像素比。在设备像素比高于1的设备上，图像显示很小，当您放大时，它会变大（如果您放大到普通浏览器，也会发生同样的情况）。所以我的问题是有没有一种方法可以通过使用CSS（或者不太好的JavaScript）来实现恒定（实际）大小的图像？有没有可能固定大小，不允许它变大或变小？
wpx232ag1#
我相信你想要的是设置一个恒定的比例的视口。将此添加到<head>：<meta content="width=device-width, initial-scale=1.0" name="viewport">个
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
de90aj5v2#
你可以像这样将图片封装在div中：
<div id='imageDiv'><img src='theImage.png' class='imageclass' /></div>
字符串然后像这样用CSS设置div的大小和图像的位置：
#imageDiv { height: 500px; width: 500px; overflow: hidden; } .imageclass { position: absolute; }
型这将使它在所有设备上保持相同的大小。
ezykj2lf3#
到目前为止，我能想到的最好的解决方案，没有大量（但有一点）使用JavaScript是这样的：1.把这个放在</body>之后：
</body>
<script type="text/javascript" id="script-after-body"> document.body.style.setProperty('--device-pixel-ratio', devicePixelRatio); window.addEventListener('resize',e=>{ document.body.style.setProperty('--device-pixel-ratio', devicePixelRatio); }); </script>
1.把它放在<img>的样式中：
<img>
width: calc(250px / var(--device-pixel-ratio));
与大量使用脚本的解决方案相比，此解决方案有一个限制，即您必须在CSS中指定预期图像大小的值。
3条答案
按热度按时间wpx232ag1#
我相信你想要的是设置一个恒定的比例的视口。
将此添加到
<head>：<meta content="width=device-width, initial-scale=1.0" name="viewport">个de90aj5v2#
你可以像这样将图片封装在div中：
字符串
然后像这样用CSS设置div的大小和图像的位置：
型
这将使它在所有设备上保持相同的大小。
ezykj2lf3#
到目前为止，我能想到的最好的解决方案，没有大量（但有一点）使用JavaScript是这样的：
1.把这个放在
</body>之后：1.把它放在
<img>的样式中：与大量使用脚本的解决方案相比，此解决方案有一个限制，即您必须在CSS中指定预期图像大小的值。