CSS Bootstrap 图像全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17529984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap image full width of span
提问by John Beadle
Not sure if this is possible, but I would like to have an image fill the entire width AND height of a span using Twitter Bootstrap.
不确定这是否可行，但我希望使用 Twitter Bootstrap 将图像填充整个跨度的宽度和高度。
I have a sidebar with width of span4 and the remaining span 8 with an image.
我有一个宽度为 span4 的侧边栏，剩余的 span 为 8 带有图像。
I have tried using the background:cover class, however it will only fill the width of the span, and the height will only fill when I specify a height.
我曾尝试使用 background:cover 类，但是它只会填充跨度的宽度，而高度只会在我指定高度时填充。
HTML
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-->
Thanks in advance
提前致谢
JB
JB
回答by Mauricio
Not exactly within twitter bootstrap, but what is stopping you from doing:
不完全在 twitter bootstrap 中，但是是什么阻止了你做：
.span8 img { width: 100%; height: 100%; }
Obviously it would be better to have an #id or a better identifier than .span8 since you could be using that elsewhere and don't want all the images stretched like that.
显然，拥有#id 或比 .span8 更好的标识符会更好，因为您可以在其他地方使用它并且不希望所有图像都像那样拉伸。
EDIT: As you know, this will skew the image and it may look pretty bad, since it's not keeping the proportions, you are just enforcing a height and width. I wouldn't recommend this approach myself.
编辑：如您所知，这会使图像倾斜，而且看起来可能很糟糕，因为它没有保持比例，您只是在强制执行高度和宽度。我自己不会推荐这种方法。
回答by sulfureous
Bootstrap already does this by default if you are using the image with an <img>tag as opposed to a CSS background image.
如果您使用带有<img>标签的图像而不是 CSS 背景图像，Bootstrap 已经默认执行此操作。
If your image is big enough when you place it in the markup it will extend to 100% of it's parent container (in this case your .span8 container)
如果您将图像放入标记中时图像足够大，它将扩展到其父容器的 100%（在这种情况下，您的 .span8 容器）
So you probably just need to drop in a big enough image to see this effect, also don't forget to include your bootstrap responsive stylesheet as well as the normal one.
所以你可能只需要放入一个足够大的图像来查看这种效果，也不要忘记包括你的引导响应式样式表以及正常的样式表。
Last but not least, I do recommend that if you don't find how to do something with a stock bootstrap framework, just add your own code, but do it in another stylesheet and keep track of what you modify there, make sure it's at the bottom of the rest of all your CSS so the styles cascade properly.
最后但并非最不重要的一点，我建议如果您没有找到如何使用股票引导框架做某事，只需添加您自己的代码，但在另一个样式表中执行并跟踪您在那里修改的内容，确保它位于所有 CSS 其余部分的底部，以便样式正确层叠。
So with that said, don't modify the bootstrap CSS files directly, that will be a pain when you want to upgrade to a newer version.
所以话虽如此，不要直接修改引导 CSS 文件，当你想升级到更新版本时会很痛苦。
