如何将100%的图像适合Jumbotron

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 {background-size: 100% 100%; }

如果您希望背景图像是覆盖整个高度和宽度的超大屏幕,但你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;
}