56

It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.

In version 2 the images CSS properties inherited by default the parent's div properties.

Is this correct?

1
  • 9
    It looks like there is a new class for responsive images .img-responsive
    – Schmalzy
    Commented Jul 29, 2013 at 19:39

3 Answers 3

142

Bootstrap 4

For Bootstrap 4 use Sass (SCSS):

// make images responisve by default
img {
  @extend .img-fluid;    
}

answer updated for version 3

Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:

.img-responsive {
 display: block;
 height: auto;
 max-width: 100%;
}

Note img tag gets by default:

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

So use class="img-responsive" to make your images responsive.

To make all images responsive by default:

css: add the code below under the bootstrap css:

   img {
          display: block;
          height: auto;
          max-width: 100%;
   }

less: add the code below in your mixins.less:

img {
  &:extend(.img-responsive);
}

Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547

Carousel

img tags inside a carousel are responsive by default

Semantic rules

See also the answer of @its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547

As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level. So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.

Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.

Images inside p elements which require inline-block as suggest by @its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.

1
  • Sass: img { @extend .img-responsive; }
    – jgillich
    Commented Jul 21, 2015 at 21:40
13

Excellent suggestion by @BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).

So, mine would look like this:

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

Please do let me know if my understanding is flawed. :)


[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.

4
  • interesting stuff. If you set a width (max-width in this case) the element will always be / become a block level element as i understood. So following the semantic rules you can't use an image with max-height in a <p>. Set the display inline-block maybe feels better but is not. This should be the reason Bootstrap don't make images responsive by default now. Commented Sep 8, 2013 at 20:41
  • 1
    @BassJobsen Here's more to support my answer: stackoverflow.com/a/2402773/1071413
    – its_me
    Commented Apr 20, 2014 at 9:13
  • @its-me It seems that in HTML5 the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also developer.mozilla.org/en-US/docs/Web/HTML/… Commented Sep 29, 2014 at 18:22
  • After initially using the accepted solution, I ran into a few undesirable outcomes. Separately, I also arrived at the same conclusion of using inline-block which solved those issues without any negative side affects that I'm aware of. Commented Aug 12, 2015 at 17:40
0

Got here after trying to figure out if it's safe to apply img-responsive for all images.

The answer by @its_me led me to think that it isn't safe to apply this for images under a p element.

This does not seems to be what the bootstrap team think.

This is why images are not responsive by default in bootstrap3:

The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.