Better way to accomplish this adaptive grid?

[Anonymous]

Linked below is a simple demo of an adaptive image grid using css. The demo uses the zoom property to proportinaly scale content when the window width reaches a certain break-point. The output in the demo behaves exactly as it should, but the code seems like a hack. Considering the the browser support for zoom is shaky at best (no FF support), I’m wondering if anyone can suggest a better method for accomplishing a similar result.

Also…I’ve attempted to solve this by using a percentage width + fixed max-width container, but this causes the inline elements to drop lines when the container is too small. In some cases this is perfectly fine, but not for this unfortunately.

And…I’m aware a similar result can be accomplished by using transform-scale. I would like to stay away from this method if possible.

Finally…I’m open to using javascript/jquery, if it can be accomplished with only a few lines. (No bloated plugins)

Demo: http://jsfiddle.net/H4mbN/show/

Your help is appreciated. Many Thanks.

[Podders]

The only way I can think of is to wrap each image in a div that defines its width then give the images a 100% width, then change the overall wrapper size in the media queries instead, this should be supported by all browsers that support media queries and display inline-block,

http://jsfiddle.net/dB5jw/show/

[Anonymous]

@Podders

Thanks for the input. Your jsfiddle links to the same code as the demo I posted. Am I missing something…or did you forget to update your changes?

[Author]

Posts