Nevada Nevada - 7 months ago 14
HTML Question

How to scale the image with css

I have 3 images and how to scale this images than I reduce the size of the browser. How to make images smaller whan make my browser smaller?
I try this but it does not work:

HTML

<div class="main">
<div class="submain">
<div class="iner">
<img src="img/sample1.png" alt="" />
</div>
<div class="iner1">
<img src="img/sample2.png" alt="" />
</div>
<div class="iner2">
<img src="img/sample3.png" alt="" />
</div>
</div>
</div>


CSS

.main{
position:relative;
height: 500px;
width: 1000px;
background-color: #111210;
}


.iner img{
position: absolute;
width: 600px;
height: 350px;
background-color: #34cb2f;
bottom: 0;

left:50%;
z-index: 5;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.iner1 img{
position: absolute;
width: 600px;
height: 270px;
background-color: #34cb2f;
bottom: 0;

right: 5%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.iner2 img{
position: absolute;
width: 600px;
height: 270px;
background-color: #34cb2f;
bottom: 0;

left: 65%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.submain{
width: 800px;
height: 200px;
background-color: rgba(38, 118, 212, 0.51);
}


And this is for scale image when min-width less than 400px:

@media screen and (min-width: 400px) {
.submain{
width: 75%;
}
}


But this media rule does not work, maybe I doing something wrong, please help me to understand. Thank you!

Answer

The media query should work (I ghess), but as the imgs have fixed width, they're just overflowing.

You should use percentual width for the imgs as well. Remember that if you set the width or the height, the other dimension will scale proportionally.