使用Twitter Bootstrap我意识到默认情况下它会响应地缩放图像。这很棒，但并不总是完美的。
例如，我500x300在桌面上有一张图片，然后它为移动设备调整大小，该图片将非常小而且不是很高，从而丢失了图片的大部分细节部分。
我已经看到其他网站实际上并没有太多缩放图像，而是使用父 div 对mask图像进行排序。（http://www.fitnessfireworks.com就是一个很好的例子，不再可用。）
实现这一目标的最佳方法是什么？CSS背景图像和背景图像缩放的组合？只是寻找最佳实践。
我已经看到其他网站实际上并没有太多地缩放图像，而是使用父 div 来掩盖图像
如果您检查CSS您提到的页面上的 ，您会发现它们不是使用 imline 图像，而是通常使用背景图像定义 div，并使用CSSlike
#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}
这是一个示例，说明如何通过缩放内联图像与background-image.
第二种方法的关键是使用 background-size:cover 并操纵 div 的大小（以及背景图像的大小）。
http://css-tricks.com/perfect-full-page-background-image/有关于background-cover.
您可能会发现这篇文章很有用。它解释了如何优化图像以实现响应式显示并避免多个图像下载
If image quality is important I'd use two images using different class declaration. External tools will always be better at scaling images than the browser doing it on-the-fly.