9.1 #Images.Banner Banner extended
img-banner
<img>s will always shrink to fit their container when they are too large. But sometimes, you will want it to stretch to fill the container when it is too small. This class will cause the image to scale up to fill the width of its container.
<img src="../images/docs/placeholders/300x100.png" class="img-banner">9.2 #Images.Fill Fill background extended
img-fill
If you need to specify a background image that fills your container, use the img-fill. Then set a background-image in your stylesheet or an inline style to specify the image url.
Mix this class in with a container like a panel for formatting, or use padded to make it standalone:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<div class="img-fill" style="background-image: url(../images/docs/placeholders/800x200.png)">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>Lorem ipsum dolor sit amet.
<div class="panel panel-default img-fill" style="background-image: url(../images/docs/placeholders/800x200.png)">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>Lorem ipsum dolor sit amet.
<div class="img-fill padded" style="background-image: url(../images/docs/placeholders/800x200.png)">
<p>Lorem ipsum dolor sit amet.</p>
</div>9.3 #Images.Fit Fit background image extended
img-fit
If you need to specify a background image that fits entirely inside your container, use the class img-fit. Then set a background-image in your stylesheet or an inline style to specify the image url.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<div class="img-fit" style="background-image: url(../images/docs/placeholders/800x200.png)">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>