Is there a way to adjust image sizes on my website based on different screen resolutions? Specifically, I need to reduce the width of images from 28% to 20% for screens with a resolution of 2560x1440. This change is necessary as it will enhance the overall look and feel of the website design. However, this adjustment should only apply to that particular screen resolution, while maintaining the original size for other resolutions like 1280x720.
To better illustrate this, here is an example image at 28% width: https://i.sstatic.net/ZoHyw.jpg
And this is how I want the image to appear, with 20% width specifically for that screen resolution: https://i.sstatic.net/Xj5fk.jpg
I have attempted to achieve this using CSS, but so far without success:
@media (max-width: 2000px){
.amenajari_interioare_css{
width: 20%;
}
}
Below is the HTML and CSS code I am currently working with:
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;
}