html - 如何在不同屏幕尺寸的页面上调整图像大小？

Question

如何根据不同的屏幕分辨率调整我的演示网站上的图像大小？例如，在像 2560x1440 这样的分辨率下，图像的宽度太大了。我希望它从 28% 增加到 20%，因为我认为这样看起来会更好。但仅适用于该屏幕分辨率，在其他屏幕分辨率(如 1280x720)中没问题。

这是我所说的图像，宽度为 28%:https://imgur.com/OPUbdWz

这就是我想要转换它的方式，在该特定屏幕分辨率上具有 20% 的宽度:https://imgur.com/iXLAe8l

这是我在 CSS 中的尝试，但没有用:

@media (max-width: 2000px){ 
  .amenajari_interioare_css{
    width: 20%;
  }
}

这是我的 HTML 和 CSS 代码:

HTML:

<section id="showcase">
    <div class="container">
        <h1>LOCUINȚE</h1>
        <div class="amenajari_interioare_css">
            <img src="../img/locuinta1.jpg" alt="" />
        </div>
        <div class="amenajari_interioare_css">
            <img src="../img/locuinta2.jpg" alt="" />
        </div>
        <div class="amenajari_interioare_css">
            <img src="../img/locuinta3.jpg" alt="" />
        </div>
        <div class="amenajari_interioare_css">
            <img src="../img/locuinta4.jpg" alt="" />
        </div>
        <div class="amenajari_interioare_css">
            <img src="../img/locuinta5.jpg" alt="" />
        </div>
        <div class="amenajari_interioare_css">
            <img src="../img/locuinta6.jpg" alt="" />
        </div>
</section>

CSS:

.amenajari_interioare_css{
    min-width: 350px;
    width: 28%;
    height: 300px;
    display: inline-block;
    margin: 8px;
    position: relative;
}

.amenajari_interioare_css img{
    margin-top: 5px;
    margin-bottom: 1px;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    border-radius: 16px;
}

Answer 1

您的 CSS 中有几个错误 - 主要是媒体查询。它应该是 min-width，因为您希望更改发生在 2000 像素的屏幕尺寸上。

@media (min-width: 2000px){

.amenajari_interioare_css {
    width: 20%;
    }
}

您可能应该做的另一件事是:

.amenajari_interioare_css img{
    margin-top: 5px;
    margin-bottom: 1px;
    width: 100%;
    height: auto;
    border: 1px solid black;
    border-radius: 16px;
}

将高度设置为auto，或者在您没有完美正方形图像的情况下，否则该图像将被拉伸(stretch)。