Adaptive Images Twitter Bootstrap Ready

[kollinger]

If you are using a grid system like Twitter Bootstrap, it could be, that the biggest resolution do not affort the biggest images. Because on a special width the layout will starting to get single-column and the columns possibly get expanded.

Therefore I implemented 2 new arrays for the grid column widths and the grid gutter widths. The keys of these 2 arrays and the resolutions array are depending on each other.

Column and gutter width came from: http://twitter.github.io/bootstrap/scaffolding.html#responsive Compare the table there with the 3 mentioned arrays and you will finally understand... ;)

The 5000 in $resolutions is for 1200px and above.

You can modify the 3 mentioned arrays to adapt to any other grid system you like.

How to use with Twitter Bootstrap:

All relevant images have to be in folders named by their bootstrap span-size-classes. E.g. /img/span8/image.jpg Everything else is the same as in previous Adaptive-Images versions.