Question

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

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

我尝试过使用背景：封面类，但它只会填充跨度的宽度，高度只会在指定高度时填充。

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-->

提前致谢

JB

Answer 1

不完全在Twitter引导程序中，但是阻止你做什么：

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

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

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

Answer 2

如果您使用带有<img>标记的图像而不是CSS背景图像，则默认情况下Bootstrap已执行此操作。

如果您将图像放入标记时图像足够大，它将扩展到其父容器的100％（在本例中为.span8容器）

所以你可能只需要放入足够大的图像来看到这种效果，也不要忘记包含你的自举响应样式表以及正常的样式表。

最后但并非最不重要的，我建议如果你没有找到如何使用库存引导框架做一些事情，只需添加自己的代码，但在另一个样式表中执行并跟踪你在那里修改的内容，make确定它位于所有CSS其余部分的底部，因此样式可以正常级联。

所以说，不要直接修改bootstrap CSS文件，当你想升级到更新的版本时会很痛苦。

Bootstrap图像全宽度的跨度

2 个答案: