不确定这是否可行,但我希望使用 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…</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-->
提前致谢
新山
最佳答案
不完全在 twitter bootstrap 内,但是什么阻止了你做:
.span8 img { width: 100%; height: 100%; }
显然,拥有 #id 或比 .span8 更好的标识符会更好,因为您可以在其他地方使用它,并且不希望所有图像都像这样拉伸(stretch)。
编辑:如您所知,这会使图像倾斜,并且看起来可能很糟糕,因为它没有保持比例,您只是强制执行高度和宽度。我自己不会推荐这种方法。
关于css - Bootstrap 图像的跨度全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17529984/