CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
samurai_jane
samurai_jane

Reputation: 835

Image extends beyond the parent in Twitter Bootstrap in spite of `img-responsive`

Twitter's documentation states that "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."

This is my HTML:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" class="img-responsive">
      </a>
      </div>
      <ul class="nav navbar-nav">
        <li role="navigation" class="active"><a href="#">NavA</a></li>
        <li role="navigation"><a href="#">NavB</a></li>
        <li role="navigation"><a href="#">NavC</a></li>
      </ul>
    </div>
</nav>

The only way, however, that I can get the image not to extend beyond its parent is to modify CSS:

.img-responsive {
  max-height: 100%;
}

I am new to Bootstrap but my understanding is that it is better to extend its core code rather than override it. To me, adding the class img-responsive should do what it says– scale the image nicely to the parent element.

Fiddle for your reference. [EDIT] Be sure to comment out my CSS override to see what I am talking about.

What am I missing? Or is my modification considered standard practice?

Upvotes: 0

Views: 431

Answers (2)

Dev 404
Dev 404

Reputation: 1587

I don't believe the class img-responsive works in Bootstrap unless it's being used inside of the Bootstrap Grid.

According to the documentation on how to use an image for the navbar-brand, you may need to customize the CSS depending on your image.

Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.

Source

Upvotes: 0

Lee
Lee

Reputation: 4323

.navbar-brand doesn't have a width set by default, so .img-responsive has no idea what the parent width should be, and so cannot scale to it.

By default if no width or height attributes are added to an <img> tag, the image is displayed at full size.

Your modification is correct. Or you can just apply a max-width to the .navbar-brand.

http://www.bootply.com/BGsm04iKKK

Upvotes: 2

Related Questions