CODEWITHSUNDEEP
javascriptjquery
Patrik
Patrik

Reputation: 2247

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 smaller 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.

Upvotes: 0

Views: 342

Answers (2)

airportyh
airportyh

Reputation: 22668

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.

Upvotes: 0

Dan Grossman
Dan Grossman

Reputation: 52372

Divide the window size by 80 and round up.

Upvotes: 1

Related Questions