How do I scale a row of images to fit container width? - html

Question

I want to display a grid of images that will scale automatically to fit the available width. The number of images per row is arbitrary and the available width can vary as the user re-sizes the window. The original images also may be of different widths but need to be displayed with the same width each. I'd prefer to avoid tables and need a CSS-only solution. The html I envisage is something like:
<div class='img-grid'> <!-- one per page, typically fixed 70% of page width -->
<!-- can be an arbitrary number of rows per grid -->
<div class='row'> <!-- width would be 100% of img-grid width -->
<!-- can be an arbitrary number of images per row -->
<div class='img-wrapper'> <!-- wrapper needs to force images to same width -->
<img class='image' src="test1.jpg"/>
</div>
</div>
</div>
Seems simple but I'm getting confused with what css to use on each of the 4 classes to force the images to the same width, to scale that width so that the (arbitrary number of) images fit within the row without wrapping and to ensure everything re-scales as the browser window width changes.
Thanks
Nigel

Answer 1

You can do it with CSS table layout, see the demo follows.
JSFIDDLE DEMO
.row {
display: table;
border-collapse: collapse;
width: 100%;
}
.item {
display: table-cell;
vertical-align: top;
}
.item img {
display: block;
width: 100%;
height: auto;
}
<div class="row">
<div class="item">
<img src="//dummyimage.com/100x100/aaa" />
</div>
<div class="item">
<img src="//dummyimage.com/200x200/bbb" />
</div>
<div class="item">
<img src="//dummyimage.com/300x300/ccc" />
</div>
</div>

Answer 2

Flexbox is usefull in your scenario:
Add display:flex to the row:
And flex: 1 to the row items:
.img-grid { width: 70%; }
.row { width: 100%; display: flex; }
img { width: 100%; }
.img-wrapper
{
flex: 1;
}
<div class='img-grid'> <!-- one per page, typically fixed 70% of page width -->
<!-- can be an arbitrary number of rows per grid -->
<div class='row'> <!-- width would be 100% of img-grid width -->
<!-- can be an arbitrary number of images per row -->
<div class='img-wrapper'>
<img class='image' src="http://placeimg.com/440/680/any"/>
</div>
<div class='img-wrapper'>
<img class='image' src="http://placeimg.com/640/380/any"/>
</div>
<div class='img-wrapper'>
<img class='image' src="http://placeimg.com/540/480/any"/>
</div>
<div class='img-wrapper'>
<img class='image' src="http://placeimg.com/640/280/any"/>
</div>
<div class='img-wrapper'>
<img class='image' src="http://placeimg.com/740/480/any"/>
</div>
</div>
</div>

Answer 3

demo - http://jsfiddle.net/u471prst/
* {
box-sizing: border-box;
}
.img-grid {
width: 70%;
border: 2px solid red;
}
.row {
width: 100%;
border: 2px solid blue;
}
.img-wrapper {
width: 100%;
}
.img-wrapper img {
width: 100%;
height: auto;
}
<div class='img-grid'>
<!-- one per page, typically fixed 70% of page width -->
<!-- can be an arbitrary number of rows per grid -->
<div class='row'>
<!-- width would be 100% of img-grid width -->
<!-- can be an arbitrary number of images per row -->
<div class='img-wrapper'>
<!-- wrapper needs to force images to same width -->
<img class='image' src="http://placeimg.com/640/480/any" />
</div>
</div>
</div>