Twitter Bootstrap Question posted in

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?

Tags:

2

Answers


  1. 0

    .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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search