如何使图像拉伸以适应流体布局中的div内部

Question

我正在使用Twitter的Bootstrap流体布局。这是我的代码片段

<div class="hero-unit" style="background-image:url('images/ball on sand.JPG'); background-size:100%;">
  <h1>Pelican Volleyball</h1>
  <p>The northshore's premiere outdoor volleyball organization</p>
  <p><a href="index.php?p=about" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

如果我让窗户太窄，“沙滩上的球”将会重复。我只想让我的图像的高度伸展到完全适合英雄单位div。我该怎么做？

Answer 1

尝试background-repeat: no-repeat和background-size: cover

Answer 2

您可以尝试background-size:cover

来自MDN

  

盖   

此关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。