auto resize images so they fit in a window

I have a gallery that is page with just a bunch of images. Nothing else.

And I want to resize and reduce/increase the number of images on a row depending on the with of the browser window.

Right now I have a fixed number if images per row.

imgSize = documentWidth/18;

With my browser window (1770px), this produces 18 images on one row á 98.3px wide. But if the users window is a lot smalle开发者_如何转开发r than mine, let's say 962px, the images will be 53.4px wide which is to small. I want them around 100px.

So I need to calculate how many images will fit on one row if the window size is X and the image cannot be larger than 120px and smaller than 80px.

Divide the window size by 80 and round up.

Responsive design addresses what you are trying to do. You'd use media queries to specify a different number of columns depending on the width of the window - this is done by giving the images a percentage width. Then you could give the images a min-width as well as max-width to constrain their actual sizes.