在所有屏幕分辨率下以相同大小显示的图像

Images to be seen at the same size across all screen resolutions

本文关键字：显示 图像 屏幕 分辨率      更新时间：2023-09-26

我正在尝试在计算机屏幕上以实际大小显示对象，我在将图像大小调整为不同的屏幕分辨率和大小时遇到了一些问题。

有人对我如何做到这一点有任何想法吗？

用一些可能有助于回答的代码更新您的问题。

无论如何，尝试通过 css 给出一个固定的宽度或高度，该宽度或高度在所有浏览器和视口中都保持不变。

使用像素而不是百分比。这肯定会对你有所帮助。如果您仍然感到困惑，请分享您的逻辑和编码尝试，以便每个人都可以详细帮助您。

如果您希望图像具有相同的大小，则应使用容器div 并将该图像放入容器中，然后为该容器div 提供高度和宽度。

如果您还可以在 css 中为该容器div 提供最大宽度和最大高度参数，那就更好了。

<div class="container"></div>

和你的 CSS

.container{
background:url('path/to/your/image');
width:100px;
height:100px;
max-width:100px;
max-height:100px;
background-size:cover;
}

演示

http://jsfiddle.net/u6zg58cb/

我也遇到过CSS3"vh"和"vw"单元vh ：= 视口高度vw ：= 视口宽度

我建议你可以使用这些而不是像素

相关文章：