Css 引导响应图像缩放

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

比如说，我在桌面上有一个

500x300

图像，然后它会调整移动设备的大小，该图像将非常小而不是很高，丢失图像的大部分细节部分

我已经看到其他网站实际上并没有对图像进行太大的缩放，而是使用父div对图像进行排序。（这是一个很好的例子，不再可用。）

---

实现这一目标的最佳方法是什么？

CSS

背景图像和背景图像缩放的组合？只是寻找最佳实践。

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

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

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

如果您查看您提到的页面上的

CSS

，您将看到，它们通常使用背景图像定义div，而不是使用imline图像，并使用

CSS

类似的方法

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

下面是一个示例，说明如何通过缩放内联图像和背景图像来获得完全不同的结果

第二种方法的关键是使用背景大小：覆盖并操纵div的大小（以及背景图像的大小）

---

关于

背景封面的变体和选项有很好的信息

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