Cropping the image to aspect ratio in bootstrap responsive grid

Question

Problem: I am trying to place images in the responsive grid system of the Twitter's Bootstrap, so they will be scaled into the given space (for responsive CSS size of the column will differ for different devices). I want them to fit into the aspect ratio -- lets assume it is a square.

Standard CSS cropping technique do not work if I want the images to be rescaled by Bootstrap to fit the grid design. Negative margins works only for cutting top and bottom part -- when the height of the image has to be cut, and the width is left unchanged (e.g. to put portrait image into the square).

I have found that this technique for specifying aspect ratio to cut the width leaving the height unchanged (putting landscape image into the square) works well with Bootstrap's scaling.

The example (jsfiddle) of the cropped images for size 1600x400 and 400x1600. So far I checked it in current Chrome and Safari. Edit: Fixed to also work in Firefox.

Question: How can I do it in one way for both: cutting the width and the height. How to do arbitrary crop on an image, choosing the rectangle, to be properly rescaled by Bootstrap? How can I crop to some aspect ratio without the prior knowledge of the size of the image?

Thank you for any ideas!

Answer 1

If your solution only has to work in modern browsers and the img-tag isn't mandatory, using images as background has helped me out often in responsive designs. You can easily position backgrounds in the center and make them fit their container.

http://jsfiddle.net/willemvb/wAqSV/2/