title: Cropping the image to aspect ratio in bootstrap responsive grid
body: <p><strong>Problem:</strong> I am trying to place images in the <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem" rel="noreferrer">responsive grid system</a> 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.</p>
  
  <p><a href="http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/" rel="noreferrer">Standard CSS cropping technique</a> 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).</p>
  
  <p>I have found that <a href="http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio" rel="noreferrer">this technique</a> for specifying aspect ratio to cut the width leaving the height unchanged (putting landscape image into the square) works well with Bootstrap's scaling.</p>
  
  <p><a href="http://jsfiddle.net/EZLA5/6/" rel="noreferrer">The example (jsfiddle)</a> of the cropped images for size 1600x400 and 400x1600. So far I checked it in current Chrome and Safari. <strong>Edit:</strong> Fixed to also work in Firefox.</p>
  
  <p><strong>Question:</strong> 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?</p>
  
  <p>Thank you for any ideas!</p>