Bootstrap图像全宽度的跨度 [英] Bootstrap image full width of span
问题描述
不确定这是否可行，但我希望使用Twitter Bootstrap填充图像的整个宽度和高度。
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.
我有一个侧边栏宽度为span4，剩余跨度为8，带有图像。
I have a sidebar with width of span4 and the remaining span 8 with an image.
我尝试过使用background：cover类，但它只会填充跨度的宽度，而高度只会在指定高度时填充。
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.
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-->
提前致谢
JB
推荐答案
如果你使用带有< img> 标签而不是CSS背景图片。
Bootstrap already does this by default if you are using the image with an <img> tag as opposed to a CSS background image.
如果你的图像放在标记中足够大，它将扩展到它的父级的100％容器（在这种情况下是你的.span8容器）
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)
所以你可能只需要放入足够大的图像来看到这种效果，也不要忘记包括你的引导响应式样式表以及正常的样式表。
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.
最后但并非最不重要的是，我建议如果你没有找到如何使用stock bootstrap框架做某事，只需添加自己的代码，但是在另一个样式表中进行操作并跟踪你在那里修改的内容，确保它位于所有CSS的底部，以便样式级联正确。
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.
这篇关于Bootstrap图像全宽度的跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
