I’m trying to make a responsive layout with fluid images that work with Masonry and jQuery so when the browser window is resized the images will shrink or expand accordingly. When the images become to small or large, Masonry should then adjust the columns. Here is an example of the effect I’m going for:
http://themeforest.net/item/pitch-responsive-creative-showcase/full_screen_preview/4558088
You can actually see this affect done on the Masonry homepage as well: http://masonry.desandro.com/
The problem I’m having is that the images are not acting fluid. In other words, they are not resizing when the browser window resizes. For example, if you keep shrinking the browser window the images will remain the same size. Eventually the right-most column will just drop and Masonry will animate and adjust the columns accordingly.
I tried getting the fluid images to work properly in CSS, but it seems to have no affect once Masonry is enabled. You’ll see the fluid images are working properly if you disable JavaScript (which consequently disables Masonry).
Here’s what I have so far: http://0p2.rosstran.net
Any sort of help would be greatly appreciated!