html - 如何使图像拉伸(stretch)以适应流体布局中的 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>

如果我将窗口设置得太窄，“沙子上的球”图像将重复出现。我只是想让我的图像高度拉伸(stretch)以完全适合 hero-unit div。我该怎么做？

Answer 1

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