将 html 页面中的图像堆叠在尽可能多的列中

Question

Another one of my HTML/CSS/JS hurdles.

I have 12 photos which I need to fit in a page like this:

• They should take up as many columns as possible (perhaps no more than 4)
• They should stretch to fill all the available space (so if there is one column, an image's width is 100%, if there's two - 50%, if there's three - 33% and so on)
• The layout should change to less columns if the images fall under a certain size.

This code nails some of it, but doesn't quite cut it: the images fill up all the available space only if they're in 3 columns, any less and they stick to the minimum size of 160px; and zooming the page doesn't work right, at least in Opera:

img.photoGallery {
   min-width: 160px;
   max-width: 32%;     
   float: left;
}

Tables can't do this. CSS doesn't seem to, either. I'll probably resort to JavaScript, although I'm reluctant to depend on it. So is there a trick which I don't know, and which can help me out?

Answer 1

Instead of "max-width: 32%", what if you put "width: 100%"? If you want an image to fit it's container's width, you should put it's width as 100%. However, I can't visualize your layout properly, so this may not be what you are looking for.