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

如果我让我的窗口太窄，“沙子上的球”的图像会重复出现。我只想让图像的高度完全适合 hero-unit div。我该怎么做呢？

Answer 1

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

Answer 2

你可以试试background-size:cover

来自 MDN

覆盖

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