How to resize multiple images side by side to to fit the current screen size? - html

Question

I have a div with 5 rows and with multiple images in it. The Html looks something like this:
<div id="row3" class="row">
<div id="im15" class="column">
<img src="img/img15.jpg" alt="movie">
</div>
<div id="im16" class="column">
<img src="img/img16.jpg" alt="movie">
</div>
<div id="im17" class="column">
<img src="img/img17.jpg" alt="movie">
</div>
<div id="im18" class="column">
<img src="img/img18.jpg" alt="movie">
</div>
<div id="im19" class="column">
<img src="img/img19.jpg" alt="movie">
</div>
<div id="im20" class="column">
<img src="img/img20.jpg" alt="movie">
</div>
<div id="im21" class="column">
<img src="img/img21.jpg" alt="movie">
</div>
</div>
I have them side by side and my css looks like this:
html, body {
background-color: #222222;
overflow: hidden;
}
.column {
float: left;
}
.column img {
width: 200px;
height: 300px;
padding: 1px;
}
.images {
opacity: 0.4;
}
.row {
clear: both;
display: table;
}
It works and displays all images properly stacked with no left space in my screen size laptops, but for bigger screens this fails.
I am not able to understand how can I resize these many images to fit and leave no space for any screen size.
I would appreciate any help.

Answer 1

Try to use grid system.
grid-template-columns defines how many columns you want to divide, in the flowing example I divide 3 columns with the value 1fr 1fr 1fr.
grid-gap defines the gaps between each grids.
More information about css grid system, you can refer to this Youtube video:
https://www.youtube.com/watch?v=jV8B24rSN5o&t=1325s&frags=pl%2Cwn
It's very useful when doing some layouts with CSS.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}
.box {
border: 1px solid teal;
}
.box img {
width: 100%;
height: 100%;
}
<div class="container">
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
</div>

Answer 2

Note : This is code for 3 images side by side horizontally
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}