问题
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.
I have a sidebar with width of span4 and the remaining span 8 with an image.
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-->
Thanks in advance
JB
回答1:
Bootstrap already does this by default if you are using the image with an <img> tag as opposed to a CSS background image.
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.
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.
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.
回答2:
Not exactly within twitter bootstrap, but what is stopping you from doing:
.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.
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.
来源：https://stackoverflow.com/questions/17529984/bootstrap-image-full-width-of-span