Question

我需要有关背景图像尺寸缩放的帮助。代码：http://codepen.io/AnilSimon123/pen/JRBRZa

这里我保留了

  .bgimage{
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
  background-size:100% auto;
  height:700px;
  width:100%;
  background-position:top center;
  background-repeat:no-repeat; 
}

如您所见，图片的尺寸为588 x251像素。

我希望图像沿宽度拉伸但保持其原始高度，同时保持容器的高度为700px。图像的高度是动态的。

谢谢和问候，阿尼尔·西蒙

Answer 1

尝试使用background-size: cover

.bgimage{
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
  min-height: 251px;
  width:100%;
  background-position:top center;
  background-repeat:no-repeat; 
  background-size: 100%;
}

Answer 2

＆＃13;

.bgimage{
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat top left;
 background-size:100% 251px;
  width:100%;
  height:700px;
}

＆＃13;

<div class="bgimage">
  this is test
</div>

＆＃13;

使用background-size: cover代替background-size:100% auto;

background-size：封面：将背景图像缩放为尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

Answer 3

背景封面效果很好。

background-size: cover;

但不要忘记将背景位置添加到固定和中心位置。有关详细信息，请查看https://css-tricks.com/perfect-full-page-background-image/

希望有所帮助

Answer 4

    .bgimage{
   background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
    background-attachment: fixed;
    background-position:top center;
    background-size: cover;
    -webkit-background-size: cover;
    height:700px;
    width:100%;
    color: #fff;
    text-align: left;
    background-size:100% auto;
    background-repeat:no-repeat; 

}

我认为这就是你想要的

Answer 5

尝试在div高度为700px的位置添加容器，并在另一个绝对定位的div上添加bgimage（因此不会影响其他任何内容），高度251px和z-index：-1将其发送到背部。另外，为了拉伸它，将背景大小设置为100％100％。希望这有帮助

.container{
  height:700px;
  width:100%; 
}

.bgimage{
  margin:0;
  position:absolute;
  z-index:-1;
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
  background-size:100% 100%;  height:251px;
  width:100%;  background-position:top center;
  background-repeat:no-repeat;
}

<div class="container">
  <div class="bgimage"></div>
  this is test
</div>

Answer 6

.bgimage { background: url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat center top; width: 100%; height: 700px; background-size: 100% 251px;}

CSS背景图像大小缩放

6 个答案: