css - Bootstrap 图像的跨度全宽

Question

不确定这是否可行，但我希望使用 Twitter Bootstrap 让图像填充跨度的整个宽度和高度。

我有一个宽度为span4的侧边栏，剩余的span为8，带有图像。

我尝试过使用background:cover类，但是它只会填充跨度的宽度，并且只有当我指定高度时才会填充高度。

HTML

<div class="container-fluid">
<div class="row-fluid col-wrap">
<div class="span4 sidebar-red col">
<h1>About</h1>

<p class="lead">The first of its kind in Toronto&hellip;</p>

<p>Workplace One offers small businesses, entrepreneurs, professionals and anyone in between, a customized and unique work environment in a shared office community.</p>

<p>Workplace One offers flexibility. With customizable offices and services, Workplace One caters to the constant evolution of a small or growing business.</p>

<p>The unique space design encourages collaboration and provides an energy that can't be found in a home office, or other professional work environment.</p>

</div><!--/span-->



<div class="span8">
<img src="img/h_ph.jpg"/>
</div><!--/span-->


</div><!--/span-->
</div><!--/row-->

提前致谢

新山

Answer 1

不完全在 twitter bootstrap 内，但是什么阻止了你做:

.span8 img { width: 100%; height: 100%; }

显然，拥有 #id 或比 .span8 更好的标识符会更好，因为您可以在其他地方使用它，并且不希望所有图像都像这样拉伸(stretch)。

编辑:如您所知，这会使图像倾斜，并且看起来可能很糟糕，因为它没有保持比例，您只是强制执行高度和宽度。我自己不会推荐这种方法。