我不希望在调整浏览器大小时调整图像大小答案

【问题标题】：I don't want images to resize when I resize the browser我不希望在调整浏览器大小时调整图像大小
【发布时间】：2018-01-12 06:57:19
【问题描述】：

我的网页上有一些图片。我最初将它们的大小以像素为单位，例如：

<IMG src="image.png" width=700px height=100px>

当我使用具有不同屏幕分辨率的不同机器时，有时页面看起来不像我想要的那样。

然后我切换到使用百分比而不是像素来设置尺寸，例如：

<div class="logo_container">
  <IMG src="image.png">
</div>

和

.logo_container img {
    padding: 15px;
    width: 37%;
    position: relative;
}

页面现在看起来是我想要的样子，但是如果我开始调整浏览器窗口的大小，图像会缩小（同时保持纵横比）。我不希望这种情况发生。

我希望网页在浏览器全屏时看起来正确，但我不希望图像缩小。

谢谢。

【问题讨论】：

尝试媒体查询
使用您的原始代码 (width=700px)，它的外观具体有什么问题？
re：原始代码有什么问题 - 例如，一行有 3 张图像。在某些计算机上，其中一个图像会被撞到下一行。所以我将宽度更改为（比如说）33% 33% 33%。这行得通，现在所有 3 张图像都在同一行。但我不希望在调整浏览器窗口大小时图像缩小。
我明白了。您希望它如何运作？您是否希望图像在加载时适合浏览器宽度，但在浏览器大小更改时不进行调整？我会说这是images to resize 在浏览器大小发生变化时的常用功能。但是，您可能需要调查responsive images 的其他方法。
我建议将徽标图像的大小调整为大约 400 或 500 像素宽。现在它的 2046 像素，这可能是不必要的大。然后删除width:37% 并改为设置min-width:100%，这样它只会在它不适合其容器时收缩。但这只是我的建议，这取决于您的设计以及您希望它如何工作。 YouTube 徽标的设计尺寸足够小，可以适应大多数浏览器尺寸而不会缩小，尽管在较小的浏览器宽度下它会完全消失。

标签： html css browser

【解决方案1】：

您应该根据屏幕宽度更改 css：

<div class="logo_container">
  <IMG src="image.png">
</div>
<style>
@media screen and (max-width: 540px) {
    .logo_container img {
        padding: 15px;
        width: 100%;
        position: relative;
    }
}
@media screen and (min-width: 540px) and (max-width: 780px) {
    .logo_container img {
        padding: 15px;
        width: 50%;
        position: relative;
    }
}
@media screen and (min-width: 780px) {
    .logo_container img {
        padding: 15px;
        width: 30%;
        position: relative;
    }
}
</style>

【讨论】：

【解决方案2】：

使用 em。

<img src="" alt="">

CSS：

.logo_container img {
    width: 1em;
}

em 在所有设备之间都是恒定的 - 在现实生活中它始终是相同的大小：请参阅 https://www.w3schools.com/cssref/css_units.asp 了解更多信息。

【讨论】：

【解决方案3】：

只需将图像的宽度设置为固定数量的像素：

.logo_container img {
    width: 200px;
}

【讨论】：

user1551817 已经说过了，他/她试过这个但不喜欢它，因为根据像素密度，它的大小会有所不同。
不，他/她不是这么说的。 User1551817 只提到屏幕分辨率。
附言。渲染大小和屏幕大小（以像素为单位）是两个不同的东西，并且一对一不相关。CSS 定义了渲染大小，因此当您定义 width: 200px 时，Retina 显示器实际上会显示 400 像素宽的图像。
PPS。这也是您必须为视网膜显示器使用双分辨率图像的原因。如果不这样做，您最终会得到模糊的图像，因为一个图像像素将覆盖 4 个实际（屏幕）像素。