Question

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

<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;
}

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

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

谢谢。

Answer 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>

Answer 2

使用em。

<img src="" alt="">

CSS：

.logo_container img {
    width: 1em;
}

em在所有设备之间保持不变 - 它在现实生活中的大小始终相同：有关详细信息，请参阅https://www.w3schools.com/cssref/css_units.asp。

Answer 3

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

.logo_container img {
    width: 200px;
}

当我调整浏览器大小时，我不希望图像调整大小

3 个答案: