2

不确定这是否可行，但我希望使用 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-->

提前致谢

JB

4

2 回答 2

3

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

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

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

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

于 2013-07-08T20:54:48.803 回答
2

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

如果您将图像放在标记中时足够大，它将扩展到其父容器的 100%（在这种情况下是您的 .span8 容器）

因此，您可能只需要放入足够大的图像即可看到这种效果，也不要忘记包含您的引导响应样式表以及正常的样式表。

最后但并非最不重要的一点是，我建议如果您找不到如何使用股票引导框架做某事，只需添加您自己的代码，但在另一个样式表中执行并跟踪您在那里修改的内容，确保它在所有 CSS 的其余部分的底部，以便样式正确级联。

话虽如此，不要直接修改引导 CSS 文件，当您想升级到较新版本时会很痛苦。

于 2013-07-14T18:47:48.040 回答