时间戳

首页 > 解决方案 > 如何在不同的屏幕尺寸上调整页面上的图像大小？

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

问题描述

如何根据不同的屏幕分辨率调整演示网站上的图像大小？例如，在像 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;
}

标签： htmlcss

解决方案

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

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

推荐阅读