How to resize images on page on different screen size? - html

Question

How to resize images on my presentation website depending on different screen resolutions? For example, on a resolution like 2560x1440 the width of the images is too big. I want it to go from 28% to 20% because that's how i think it will look better. But only for that screen resolution, in other screen resolutions like 1280x720 it's ok.
This is an image of what i'm saying, with the 28% width: https://imgur.com/OPUbdWz
And this is how i want to transform it, with 20% width on that specific screen resolution: https://imgur.com/iXLAe8l
This is my trying in CSS, but not working:
#media (max-width: 2000px){
.amenajari_interioare_css{
width: 20%;
}
}
And this is my HTML and CSS code:
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

You have a couple errors in your CSS - mainly the media query. It should be min-width, because you want the change to happen for screen sizes above 2000px.
#media (min-width: 2000px){
.amenajari_interioare_css {
width: 20%;
}
}
The other thing you should probably do is:
.amenajari_interioare_css img{
margin-top: 5px;
margin-bottom: 1px;
width: 100%;
height: auto;
border: 1px solid black;
border-radius: 16px;
}
Set the height to auto or in the event you don't have a perfectly square image, otherwise that image will get stretched.