I've got X number of images (all the same height and width), and I want to display them on a web page. But I want to make the page automatically display the maximum number of images on a row (without resizing the images) when the browser is resized, and to show the images a fixed distance apart.
Also the images should be grouped together in the centre of the page, and displayed one after the other.
e.g. When the browser window is only wide enough to display 3 images on a row, they should be displayed as follows.
3 images per row grouped together a fixed distance apart, in the centre of the page, one after the other.
And if the browser is made wider so 4 images can be displayed on a row they should be displayed like so.
4 images per row (without resizing the images), grouped together a fixed distance apart, in the centre of the page, one after the other.
So far I've written the following code:
HTML
<div class="outer-div">
<div class="inner-div">
<div class="image-div"><img src="images/1.png"></div>
<div class="image-div"><img src="images/2.png"></div>
<div class="image-div"><img src="images/3.png"></div>
<div class="image-div"><img src="images/4.png"></div>
<div class="image-div"><img src="images/5.png"></div>
</div>
</div>
CSS
img {
height: 200px;
width: 200px;
padding: 10px;
}
.image-div {
display: inline;
}
.outer-div {
text-align: center;
width: 100%;
}
.inner-div {
text-align: left;
display: inline;
}
So the images are displayed inline with a 10px padding inside a div (inner-div) which is then centred inside the outer-div. And the images are text-aligned to the left inside the inner-div.
But the problem is they are displayed as follows:
And like follows when the browser is made wider
Can someone please show me how to display the images like the first set of images?
i.e. Maximum number of images per row (without resizing the images), one after another, grouped together in the centre of the page, fixed distance apart (wrapped).
