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，否则如果您没有完美的正方形图像，则该图像将被拉伸。

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

1 个答案: