css - Bootstrap 响应图像缩放

Question

使用 Twitter Bootstrap 我意识到默认情况下它会响应地缩放图像。这很好，但并不总是完美的。

例如，我在桌面上有一个 500x300 图片，然后它会针对移动设备调整大小，该图片将非常小而且不是很高，丢失了图片的大部分细节部分。

我已经看到其他网站实际上并没有过多地缩放图像，而是使用父 div 对图像进行 mask 排序。 (http://www.fitnessfireworks.com 是一个很好的例子，不再可用。)

完成此任务的最佳方法是什么？ CSS 背景图像和背景图像缩放的组合？只是寻找最佳实践。

Answer 1

I have seen how other sites actually don't scale the image much, but rather use the parent div to sort of mask the image

如果您检查您提到的页面上的 CSS，您会发现它们不是使用内联图像，而是通常使用背景图像定义 div，并使用 CSS喜欢

#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}  

这是一个示例，说明如何通过缩放内联图像与 background-image 获得完全不同的结果。

http://www.bootply.com/67094

第二种方法的关键是使用 background-size:cover 并控制 div 的大小(以及背景图像的大小)。

http://css-tricks.com/perfect-full-page-background-image/有关于 background-cover 的变体和选项的有用信息。