Search code examples
javascriptjqueryjquery-isotopejquery-masonrypackery

jquery isotope maximize items to fit parent container

I have a fixed height and width container (2480px x 3508) which I would like to dynamically fill with content. Content being between 6-12 images. My question is how I could dynamically size the images relative to their total number and to the size of the container. The images are all approximately the same size, only varying slightly based on their orientation. So basically when there are more images, they are smaller, and when there are less they are bigger and they fill the container as best as possible.

I have not been able to find any Isotope demos which match this? I know there is also packery, and masonry.

Any ideas, tips or examples would be great.

Thanks!

Solution

  • Imagefill.js does exactly that. It is aimed more at individual images but it can also be made to work on a series of images and in combination with Packery.

    http://johnpolacek.github.io/imagefill.js/