In my Code, I have used CSS Flexbox to put multiple images in a single line. I have specified the image size in rem and not in % because when I use % , then after resizing the window, the number of images in a row remains the same and I don't want that. Instead I want that when the screen size is lesser than the image size then the image adjusts its size according to the screen size and only one image remains in each row.
The problem I am facing is that when I resize the window size to be lesser than the images size, then full image is not visible. I want the image to shrink accordingly.
html{
font-size:12px;
}
#heading{
font-size:1.5rem;
text-align:justify;
width:80%;
margin:auto;
word-spacing:0.5rem;
color:lightslategrey;
margin-top:2rem;
margin-bottom:3rem;
}
#gallery_header{
width:80%;
margin-left:auto;
margin-right:auto;
color:blue;
font-size:3rem;
text-align:center;
margin-bottom:2rem;
}
#gallery{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
width:80%;
margin:auto;
}
.img_container{
width:35rem;
height:30rem;
display:inline-block;
}
.img_container img{
width:35rem;
height:30rem;
display:inline-block;
}
main{
display:flex;
width:100%;
flex-direction:column;
align-items:center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1">
</head>
<body>
<div id="heading">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="gallery_header">
IMAGE GALLERY
</div>
<div id="gallery">
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
</div>
<script src="script.js"></script>
</body>
</html>