Question

我想创建一个类似于本网站首页上的jumbotron： Website

无论视口的大小是多少，它总是用gif填充页面，而网站的其余部分都有相应缩放的部分。无论你如何调整视口，它都不会扭曲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>

但是当你改变视口时它会扭曲。我缺少什么，我只需要添加一些媒体查询吗？

Answer 1

通过将background-size设置为100％，您告诉浏览器拉伸背景以填充其容器，这将导致意外的失真。相反，请尝试使用background-size: cover。这告诉浏览器使图像尽可能大，以完全填充容器而不会扭曲图像。考虑它的另一种方式是background-size: cover将最小化“裁剪”图像，直到它完全适合它的容器。（作为旁注，background-size: contain告诉浏览器使图像尽可能大而不裁剪图像，但如果容器是，则会在图像上方或下方产生空白区域与图像大小不同。）

Bootstrap：响应式，全屏叠加图像（jumbotron）

1 个答案: