css - 如何在 Bootstrap 中将图像适合大屏幕？

Question

我的图像尺寸为宽度 1800 像素，高度为 200 像素，我想创建一个大屏幕，其中图像应该适合该大屏幕，这意味着大屏幕大小也应该是这样，这样我就可以看到我的完整图片，并且它也应该具有响应能力

我的代码..

<style>
    .jumbotron1{
    background-image:  url(/img/ffHeadernologo.png);
    background-size: cover;
    text-align: center;
    width:100%;
    padding-bottom: 11.1111% /* ( 1800 / 200 ) = 9; 100 / 9 = 11.1111 */
    max-height: 100%;
    overflow: hidden;
}
</style>

我想做的是..

这是我的背景

我也有如下 Logo

Logo 应该位于另一个 div 中，并且背景已设置为上面的工作正常。

我想要这样的结果

如果上述解决方案无法很好地解决这个问题，我该怎么办？

我已经看到了之前的相同问题的任何建议，但它不起作用，所以我再次询问了它。

在第三张图片中，必须存在的黑线已被删除。 谢谢您

Answer 1

只需将 responsive-img 类添加到图像标记的 class 属性

编辑:

因为你正在使用background-image我们这个CSS

CSS

<style>
    .jumbotron1{
        background-image:  url(/img/ffHeadernologo.png);
        background-size: cover;
        text-align: center;
        width:100%;
        height: 200px;
        overflow: hidden;
    }
</style>

请注意，这将保持纵横比不变，但如果屏幕高于该纵横比，它将显示上方和下方的空间，另一方面，如果屏幕比该纵横比更窄，它将裁剪右侧图像的

编辑:

看来您只想要一张背景图片。在这种情况下，我建议您只使用以下 css

body { 
    background: url(/img/ffHeadernologo.png) no-repeat center center fixed; 
    background-size: cover;
}

编辑:

您实际上是在尝试制作带有背景的标题。为此，您可以使用此

CSS

( Demo )

.jumbotron {
    background: url(http://placehold.it/1800x200/225599/ffffff) no-repeat center center fixed; 
    background-size: cover;
    height: 200px;
}