Weird resizing for thumbnails images with height and weight attributes in IE

[alienlebarge]

Our CMS can't get ride on the height and weight img attributs.
The problem is if we have an image in a .thumbnail class, IE8 do some weird resizing.

<!-- container -->
<div class="container">
  <!-- row -->
  <div class="row">

    <div class="col-md-4">
      <figure>
        <a href="" class="thumbnail">
          <img src="http://placekitten.com/g/500/300" alt="" width="500" height="300" />
          <figcaption>Cute kitty</figcaption>
         </a>
      </figure>
    </div>

    <div class="col-md-8">...</div>

  </div><!-- /.row -->
</div><!-- /.container -->

For now, I've done the following quickfix

.thumbnail > img {
  width: inherit;
}

It can be good to add this property to the .img-responsive mixin.

I can do a pull request. But before, I just wanted to know if it can produce unwanted effects.

[cvrebert]

Please post your example of the problem as a CodePen, JS Fiddle, or JS Bin.

[alienlebarge]

Since it's a pain to use respond.js with online editors, here's a gist wich reproduce the problem.

[mdo]

Why is your image getting those fixed dimensions if you're just overriding them anyway? The .thumbnail is setting a max-width so that the image is contained within the parent. Change your image attributes, override the max-width, or set a custom width that works for this use case.

[alienlebarge]

I know that. It's just I work with a CMS (TYPO3 4.7.x) from the IE8 era that can't generate img without height& width.

At least, the workaround is now documented for people who works with prehistorical browser 👴.