Question

我有大小为1400x560的图像，我希望我的jumbotron div可以缩放以适合图像的大小。当我将jumbotron的宽度设置为图像的宽度时它工作正常，但当我将网站缩小到移动视图时，我有问题。那么我该如何解决这个问题呢？ 我忘了提到我有高度而不是宽度的问题，jumbotron将div扩展到1400的宽度但不是高度560px 以下是html页面http://threeguys.us/rts/testing.html的预览。

当我缩小页面时，我希望图像根据浏览器的宽度调整大小

index.html

<div class="jumbotron"> 
</div>

CSS

.jumbotron
{   
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
 }

Answer 1

您正在寻找的是background: contain;。只需将其添加到您的班级，如下所示：

.jumbotron
{   
    padding-top: 0px;
    padding-bottom:0px;
    background-image:url('images/car/car.jpg');
    background-size: cover;
    background: contain;
    width: 100%; /* make sure to define width to fill container */
    height: 100px; /* define the height in pixels or make sure   */
                   /* you have something in your div with height */
                   /* so you can see your image */
    max-width:1400px;  /* define the max width */
 }

现在，背景图像将以div的大小进行缩放（假设div是可缩放的）。如果您想约束div，那么它不会超过特定尺寸（在您的情况下，背景图片的大小），请使用max-width: 1400px;

查看我的JSFiddle example。

Answer 2

无法让div符合其背景图片的大小，因此建议您使用img代码。

要让div符合图片大小，请在div上使用display: inline-block：

.jumbotron
{   
    display: inline-block;
    border: solid red 1px;
 }

<div class="jumbotron">
    <img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>

Answer 3

尝试：

background-size: 100%;
width:100%
position:relative;

希望它可以帮到你

Answer 4

在您的jumbotron上加上

<div class="container"></div>

它应使其在宽度方向上适合页面的其余部分。

Answer 5

简单点。谢谢

.jumbotron {
  background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}

<div class="jumbotron"></div>

Div class =“jumbotron”缩放为其背景图片的大小

5 个答案: