如何使图像 100% 适合大屏幕

我有以下 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;
}

我的图像太大，不适合 300 像素的高度，但我希望它能够自动调整大小并适合高度，这样我就可以看到我的所有图像。这一定很简单，但我看不出需要进行哪些更改。

Thanks

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

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

如果您希望背景图像覆盖大屏幕的整个高度和宽度，那么您可以这样做not关心图像的长宽比：

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

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

.jumbotron { background-size: cover; }

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

.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;
}