使用Twitter Bootstrap我意识到默认情况下它会相应地缩放图像。这很棒，但并不总是完美的。
比如说我在桌面上有一个500x300图像，然后它会针对移动设备进行调整，使图像变得非常小而且不是很高，丢失图像的大部分细节部分。
我已经看到其他网站实际上没有多大地扩展图像，而是使用父div来对图像进行排序mask。 （http://www.fitnessfireworks.com就是一个很好的例子，不再可用。）
实现这一目标的最佳方法是什么？ CSS背景图像和背景图像缩放的组合？只是寻找最佳实践。
答案 0 :(得分：15)
我已经看到其他网站实际上没有多大比例缩放图像，而是使用父div来对图像进行排序
如果你检查你提到的页面上的CSS，你会看到，而不是使用imline图像，它们通常用背景图像定义div，并使用CSS之类的
#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的变体和选项的良好信息。
答案 1 :(得分：1)
您可能会发现this文章有用。它解释了为响应显示优化图像和避免多个图像下载
答案 2 :(得分：0)
如果图像质量很重要，我会使用不同类声明的两个图像。外部工具在缩放图像时总是比浏览器即时执行更好。