Bootstrap响应式图像缩放

Question

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

例如，如果我在桌面上有一个大小为 500x300 的图像，然后它在移动设备上调整大小，那么该图像将会非常小，而且不会很高，从而失去了图像的许多详细部分。

我已经看到其他网站实际上并没有对图像进行太多缩放，而是利用父 div 来“遮罩”图像。（http://www.fitnessfireworks.com 是一个很好的例子，现已不再可用。）

最佳方法是什么？结合使用 CSS 背景图和背景图缩放？只是寻找最佳实践。

- Nic Hubbard

Answer 1

我看到其他网站实际上并没有对图像进行缩放，而是使用父 div 对图像进行了遮罩

如果您检查所提到的页面上的 CSS，您会发现它们通常定义带有背景图片的 div，并使用类似以下的 CSS：

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

以下是缩放内联图像与背景图片使用背景尺寸（background-size）会产生完全不同结果的示例。

http://www.bootply.com/67094

第二种方法的关键是使用background-size: cover并操纵div的大小（因此是背景图片的大小）。

http://css-tricks.com/perfect-full-page-background-image/提供了关于使用background-cover时变化和选项的好信息。

- David Taiaroa

Answer 2

您可能会发现this篇文章很有用。它解释了如何优化图像以适应响应式显示并避免多次下载图像。

- Carol Skelly

Answer 3

如果图像质量很重要，我会使用两个带有不同类声明的图像。外部工具比浏览器实时缩放图像更好。

- Diodeus - James MacFarlane

---

是的，质量很重要。我还计划使用2倍图像，以便它们在桌面视网膜屏幕上看起来漂亮。 - Nic Hubbard