調整瀏覽器大小時，我不希望調整圖像大小

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