CSS resizing div and images inside div on window resizing - css

Question

I have a single div with several images next to one another. Let’s say I have 7 in a row for this example.
Now, when I resize the browser, I’d like them to stay in the same row next to each other and resize their height and width accordingly.
How would I go about this?
Current example
<div>
<img src=“img1.jpg” />
<img src=“img2.jpg” />
<img src=“img3.jpg” />
<img src=“img4.jpg” />
<img src=“img5.jpg” />
<img src=“img6.jpg” />
<img src=“img7.jpg” />
<\div>

Answer 1

Try this:
div { display: grid; grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)) }
img { width: 100%; height: auto; }
<div>
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
<img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA##._V1_UX100_CR0,0,100,100_AL_.jpg" />
</div>
Explanation:
display: grid is the newest addition to the CSS layout techniques, and is the most elegant. It's widely supported in evergreen browsers, so all is good.
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)) finds a way to fit within 1 fraction of the whole width (so variable with the container size, which if you place this in an empty page, will vary with screen size too) with a minimum of 1px and auto-fit to whole width, each image.
width: 100% is needed to make sure the image isn't skewed.
height: auto has the same anti-distorting function if you want to use a full IMG tag with the width and height properties (which I fully recommend due to performance issues if you aren't building an HTTP/2 compatible site) or if you edit the height accidentally using some other CSS.
By the way, this works no matter how many images you have here, so no need to change the fractions or the percentages every time!
One last thing: when you have lists of any sort, I'd replace the <div> with an <ul> or <ol> if I were you, and have <li>s spread like this with some more CSS magic needed but a much more semantic DOM.
Image credits: IMDB.

Answer 2

A quick and dirty way is to use calc and float
div img {max-width: calc(100%/7);float:left;}
<div>
<img src="https://www.fillmurray.com/600/600" />
<img src="https://www.fillmurray.com/600/600" />
<img src="https://www.fillmurray.com/600/600" />
<img src="https://www.fillmurray.com/600/600" />
<img src="https://www.fillmurray.com/600/600" />
<img src="https://www.fillmurray.com/600/600" />
<img src="https://www.fillmurray.com/600/600" />
</div>

Answer 3

As suggested by Jon P below, you can use calc function of css. The other better way could be running media queries.
#media (min-width:1200px){
div{
width:500px;
}
div > img{
width:20%;
height:auto;
}
}

Answer 4

The very simplest way is to turn the container into a flexbox (which is also more widely supported than css-grid).
#imgs {
display: flex;
}
#imgs img {
width: 100%;
}
<div id="imgs">
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
<img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
</div>