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

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，因为您希望在2000px以上的屏幕尺寸上进行更改。

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

将height设置为auto，或者如果您没有完美的方形图像，否则该图像将被拉伸。