title: Bootstrap Responsive Images Scaling
body: <p>Using <code>Twitter Bootstrap</code> I realize that by default it scales images responsively. This is great, but isn't always perfect.</p>
  
  <p>Say for example I have a <code>500x300</code> image on desktop, then it resizes for mobile that image is going to be really small and not very tall, losing much of the detailed parts of the image.</p>
  
  <p>I have seen how other sites actually don't scale the image much, but rather use the parent div to sort of <code>mask</code> the image. (<a href="http://www.fitnessfireworks.com" rel="nofollow noreferrer">http://www.fitnessfireworks.com</a> was a great example of this, no longer available.)</p>
  
  <p>What is the best method to accomplish this? A combination of <code>CSS</code> background-image and background image scaling? Just looking for best practices.</p>