html - Bootstrap : responsive, 全屏堆叠图像(jumbotron)

Question

我想创建一个行为类似于本网站首页上的超大屏幕: Website

无论视口(viewport)的大小如何，它总是用该 gif 填充页面，并且网站的其余部分具有相应缩放的部分。同样，无论您如何调整视口(viewport)，它都不会扭曲 gif；它只是相应地重新缩放或调整

我尝试了以下方法:

<div class="container-fluid special";>
  <div class="jumbotron" style="background: url(chillin.jpg) no-repeat center center;-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;" ></div>
</div>

但是当您更改视口(viewport)时它会变形。我错过了什么，我只需要添加一些媒体查询吗？

Answer 1

通过将 background-size 设置为 100%，您告诉浏览器拉伸(stretch)背景以填充它的容器，这将导致不希望的变形。相反，请尝试使用 background-size: cover。这告诉浏览器在不扭曲图像的情况下使图像尽可能大以完全填充它的容器。另一种思考方式是 background-size: cover 将最小化“裁剪”图像，直到它完全适合容器。 (作为旁注，background-size: contain 告诉浏览器使图像尽可能大而不裁剪图像，但这会导致上方或上方出现空白如果容器与图像大小不同，则在图像下方。)