引导图像全宽跨度答案

【问题标题】：Bootstrap image full width of span引导图像全宽跨度
【发布时间】：2013-07-05 23:35:26
【问题描述】：

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

提前致谢

【问题讨论】：

你关心保持纵横比吗？好像高度是由原始图片的高度决定的，而宽度是由跨度的宽度决定的。
我并不关心纵横比——更多的是填充跨度的空间。
您说您使用了background:cover，但您的 HTML 显示的是 IMG...您想要背景图片还是 span8 内的图片？
我想要跨度内的图像。我已经尝试了许多背景图片的变体，而不是 img 标签，但这些都没有提供我想要的结果。
您最好使用背景图片，例如：.span8 { background-image: url('img/h_ph.jpg'); background-size: cover; }

标签： css image twitter-bootstrap responsive-design

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

不完全是在 twitter 引导程序中，而是阻止你做的事情：

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

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

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

【讨论】：

谢谢...你说得对，歪斜的图像看起来确实很糟糕。
您可以通过使用width: 100%; height: auto; 来缓解倾斜问题，以便图像与容器的宽度匹配，然后调整其自身的高度以进行缩放。反之亦然。