Imagine you want to showcase 4 images, all with square dimensions, each taking up 25% of the width. As you resize the window and they get smaller, ensure they can shrink down to a minimum width of 200px.
However, if they need to be made even smaller, have the third and fourth images move below the first two, and make them take up 50% of the space each. Again, they can be resized to a minimum width of 200px.
If the size is reduced further than 200px, then adjust it so only one image is displayed at a time, each taking up 100% of the width beneath the previous one.
I've been experimenting with some styles that are close to what I'm looking for, but I can't quite achieve the desired result. Any suggestions?
Here are the styles:
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
.container {
width:100%;
}
.column {
width:25%;
float:left;
min-width:200px;
}
.column img {
width:100%;
height:auto;
}
And here is the HTML:
<div class="container">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>