Question

这是一个非常简单直接的代码：

HTML标记：

<div class="jumbotron text-center top-jumbotron">
</div>

CSS：

.top-jumbotron {
    background: #ffcc00;
    background-image: url('../../bootstrap/img/home-page-banner.jpg');
    background-size: 100% auto;
    padding: 0px;
    margin: 0px;
    border: none;
}

我的图像宽度为2880像素，如果我在CSS中指定px的宽度，则显示正常。但是，我对使用硬编码指标很谨慎，因为我需要div来扩展从移动到Retina的所有显示。有没有什么方法可以在使用背景大小的百分比尺寸时显示图像？我不想在HTML中使用<img>标记，因为我将在div上叠加一些文本和其他元素;因此背景。

Answer 1

将background-size: 100% auto;更改为background-size: cover;。这将用背景图像填充div。

要使图像居中，请使用background-position: center;

如果你想在div中使用整个图像，可以试试background-size: contain;，但这会在div中留下空白区域，具体取决于它的大小。使用background-repeat: no-repeat;停止平铺时，您可能还想使用contain。

另外我猜测你在css的其他地方指定高度？否则，也需要添加。

Here's a working example.

Answer 2

您是否尝试在CSS中使用background-position属性？

尝试：

.top-jumbotron {
    background: #ffcc00;
    background-image: url('../../bootstrap/img/home-page-banner.jpg');
    background-size: 100% auto;
    background-position: center center; /*Add this*/
    padding: 0px;
    margin: 0px;
    border: none;
}

图像背景没有显示响应div

2 个答案: