Html 我不知道'；我不想在调整浏览器大小时调整图像大小

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

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

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

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

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

---

谢谢。

您应该根据屏幕宽度更改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>

@媒体屏幕和屏幕（最大宽度：540像素）{
.logo_容器img{
填充：15px；
宽度：100%；
位置：相对位置；
}
}
@媒体屏幕和（最小宽度：540像素）和（最大宽度：780像素）{
.logo_容器img{
填充：15px；
宽度：50%；
位置：相对位置；
}
}
@媒体屏幕和屏幕（最小宽度：780px）{
.logo_容器img{
填充：15px；
宽度：30%；
位置：相对位置；
}
}

您应该根据屏幕宽度更改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>

@媒体屏幕和屏幕（最大宽度：540像素）{
.logo_容器img{
填充：15px；
宽度：100%；
位置：相对位置；
}
}
@媒体屏幕和（最小宽度：540像素）和（最大宽度：780像素）{
.logo_容器img{
填充：15px；
宽度：50%；
位置：相对位置；
}
}
@媒体屏幕和屏幕（最小宽度：780px）{
.logo_容器img{
填充：15px；
宽度：30%；
位置：相对位置；
}
}

使用em

<img src="" alt="">

em在所有设备之间都是恒定的-在现实生活中它总是相同的大小：有关更多信息，请参阅。

使用em

<img src="" alt="">

---

em在所有设备之间都是恒定的-在现实生活中总是相同的大小：有关更多信息，请参阅。

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

.logo_container img {
    width: 200px;
}

---

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

.logo_container img {
    width: 200px;
}

---

请尝试媒体查询原始代码（

width=700px

），它的外观到底有什么问题？re：原始代码有什么问题？例如，有一行有3个图像。在某些计算机上，其中一个图像会被碰撞到下一行。所以我把宽度改为（比如）33%33%33%。这起作用了，现在所有3个图像都在同一行上。但我不希望在调整浏览器窗口的大小时图像缩小。我明白了。您希望它如何工作？是否希望图像在加载时适合浏览器宽度，但在浏览器大小更改时不进行调整？我想说，当浏览器大小改变时，这是常见的功能。但是，您可能需要研究其他方法。我建议将徽标图像的大小调整为400或500像素宽。现在它的2046px可能太大了。然后移除

width:37%

并改为设置

minwidth:100%

，使其仅在不适合其容器时收缩。但这只是我的建议，这取决于你的设计和你希望它如何工作。YouTube的徽标设计得足够小，可以适应大多数浏览器尺寸而不会收缩，但在较小的浏览器宽度下它会完全消失。请使用原始代码（

width=700px

）尝试媒体查询，它的外观到底有什么问题？re:原始代码有什么问题？例如，有一行有3个图像。在某些计算机上，其中一个图像会被碰撞到下一行。所以我把宽度改为（比如）33%33%33%。这起作用了，现在所有3个图像都在同一行上。但我不希望在调整浏览器窗口的大小时图像缩小。我明白了。您希望它如何工作？是否希望图像在加载时适合浏览器宽度，但在浏览器大小更改时不进行调整？我想说，当浏览器大小改变时，这是常见的功能。但是，您可能需要研究其他方法。我建议将徽标图像的大小调整为400或500像素宽。现在它的2046px可能太大了。然后移除

width:37%

并改为设置

minwidth:100%

，使其仅在不适合其容器时收缩。但这只是我的建议，这取决于你的设计和你希望它如何工作。YouTube的徽标设计得足够小，可以适应大多数浏览器尺寸而不会收缩，但在较小的浏览器宽度下它会完全消失。用户1551817已经说过，他/她尝试过这个，但不喜欢，因为根据像素密度，它会是不同的尺寸。不，他/她不是这么说的。User1551817只提到屏幕分辨率.PS。渲染大小和屏幕大小（以像素为单位）是两个不同的东西，不相关1对1。CSS定义了渲染大小，因此当您定义

width:200px

.PPS时，视网膜显示实际上将显示400像素宽的图像。这也是您必须使用双分辨率图像进行视网膜显示的原因。如果你不这样做，你将得到模糊的图像，因为一个图像像素将覆盖4个实际（屏幕）像素。用户1551817已经说过，他/她尝试过这个，但不喜欢，因为根据像素密度，它将是不同的大小。不，他/她不是这么说的。User1551817只提到屏幕分辨率.PS。渲染大小和屏幕大小（以像素为单位）是两个不同的东西，不相关1对1。CSS定义了渲染大小，因此当您定义

width:200px

.PPS时，视网膜显示实际上将显示400像素宽的图像。这也是您必须使用双分辨率图像进行视网膜显示的原因。如果您不这样做，您将最终得到模糊的图像，因为一个图像像素将覆盖4个实际（屏幕）像素。