Bootstrap 响应式图像缩放答案

【问题标题】：Bootstrap Responsive Images ScalingBootstrap 响应式图像缩放
【发布时间】：2013-07-08 21:50:30
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css twitter-bootstrap responsive-design background-image

【解决方案1】：

我已经看到其他网站实际上并没有太多缩放图像，而是使用父 div 来屏蔽图像

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

#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 的变体和选项的详细信息。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果图像质量很重要，我会使用两个使用不同类声明的图像。外部工具在缩放图像方面总是比浏览器动态缩放图像更好。

【讨论】：

是的，质量是。我还计划使用 2x 图像，以便它们在桌面视网膜屏幕上看起来不错。