How to Create a Responsive Image That Also Scales Up in Bootstrap 3

Responsive images in tables (bootstrap 3)

add .img-responsive{width:100%;} to your css, see also: Why do Firefox and Opera ignore max-width inside of display: table-cell?

How to keep images fixed but also responsive so they don't overlap

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center.

An alternate solution can be found here

Demo of the alternate solution (jFiddle)

Bootstrap 3 .img-responsive images are not responsive inside fieldset in FireFox

All you need is width:100% somewhere that applies to the tag as shown by the various answers here.

Using col-xs-12:

<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />

Or inline CSS:

<img class='img-responsive' style='width:100%;' />

Or, in your own CSS file, add an additional definition for .img-responsive

.img-responsive { 
    width:100%;
}

THE ROOT OF THE PROBLEM

This is a known FF bug that <fieldset> does not respect overflow rules:

https://bugzilla.mozilla.org/show_bug.cgi?id=261037

A CSS "FIX" to fix the FireFox bug would be to make the <fieldset> display:table-column. However, doing so, according to the following link, will cause the display of the fieldset to fail in Opera:

https://github.com/TryGhost/Ghost/issues/789

So, just set your tag to 100% width as described in one of the solutions above.

Bootstrap 3 and Responsive Background Images?

You can use dynamic height of window by adding to your html and body tag height of 100%, and the section tags of the page(where you want to streach the background images).

Example:

html,body,section{height:100%;}

Live Example

---

Related Topics