Question

我有以下HTML：

<div class="jumbotron">
    <div class="container">
        <h1>Souplesse</h1>
        <p>Be a Good Sport</p>
    </div>
</div>

以下CSS：

.jumbotron {
  background-image:url('piscine.jpg');
  height:300px;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom:1px solid #ff6a00
}
.jumbotron .container {
  position:relative;
  top:50px;
}

我的图像太大了，不适合我300px的高度，但我希望它能自动调整大小并适合高度，所以我可以看到我的所有图像。这一定很简单，但我看不出需要做出哪些改变。

由于

Answer 1

如果您希望背景图像适合您的jumbotron的高度，但不关心它是否延伸到整个宽度：

.jumbotron { background-size: auto 100%; }

如果您希望背景图像覆盖jumbotron的整个高度和宽度，并且您不关心图像的宽高比：

.jumbotron {background-size: 100% 100%; }

如果您希望背景图像覆盖整个高度和宽度的jumbotron，但您 DO 关心图像的宽高比：

.jumbotron { background-size: cover; }

如果jumbotron的宽高比与图像不同，那么最后一个选项将会截断一些图像，但您可以使用背景位置属性指定图像的位置：

.jumbotron {
    /* Image in the center of container */
    background-position: center center;

    /*  OR Image in the center top of the container */
    background-position: center top;

    /*  OR Image in the center bottom of the container  */
    background-position: center bottom;
}

Answer 2

尝试：

.jumbotron {
  background-image:url('piscine.jpg');
  height:300px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border-bottom:1px solid #ff6a00
}

请注意：

background-size: auto 100%;

第一个值是宽度，第二个值是高度。这些值符合使用px或％。

如何将100％的图像适合Jumbotron

2 个答案: