Как изменить размер изображения на странице на экране другого размера?

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 или если у вас нет идеально квадратного изображения, в противном случае это изображение будет растянуто.