IE backslash hack on .img-responsive stretches images in IE<11

[isherwood]

A width statement on .img-responsive stretches images beyond their pixel dimensions in IE <= 10. It wasn't there before v3.2.0, and I can't seem to find any explanation or discussion of the issue.

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100% \9; }

See http://jsfiddle.net/isherwood/eLQqW.

[mdo]

It was added for SVG images, fixing #10073.

[isherwood]

Seems like it was applied too broadly, no? How are we supposed to handle responsive images in IE < 11 now? I've applied an override, but that just doesn't seem right.

[mdo]

Yeah, probably need to revisit to test more things out.

[cvrebert]

Perhaps we could qualify the width declaration with [src$=".svg"]

[amit777]

Sorry if this is completely unrelated, but I noticed a bug in IE <=10 where img-thumbnail is also stretching the image to the size of the containing div. it was working fine in 3.1.1.. I'm now on 3.2.0.

[hnrch02]

@cvrebert That seems awfully specific and won't handle all cases, like a source with a query string (which is pretty common) or a source without an extension.

[cvrebert]

@amit777 If it's an SVG, it's probably related. img-thumbnail extends .img-responsive
@hnrch02 Agreed. Don't know what's the best way to handle this.

[amit777]

The image I was working with is a standard .jpg

<img class="img-thumbnail" src="testimage.jpg"/> 

[hnrch02]

Given that this breaks more than it really fixes, I think reverting the fix and adding a callout to the docs suggesting the fix of width: 100% \9; on SVG images would be the right way to go about this.

[isherwood]

Why not .svg-responsive?

[hnrch02]

Because if we only assign width: 100% \9; to .svg-responsive it wouldn't make any sense to add that class as it doesn't do anything for other browsers than IE and if we'd make it extend .img-responsive we would also need to make .svg-thumbnail which would be overly redundant.

[amit777]

Is the JPG issue i'm facing related to this? If not, I'm happy to file a different issue.

[mdo]

@amit777 Have an example or screenshot?

[mdo]

Ended up doing what @hnrch02 suggested. Reverted the hack and documented the need for it for SVG images.

[gvilcins]

@isherwood - try adding "width: auto" to .img-responsive in your local CSS file. That will override the BS stylesheet.

[acrogenesis]

This doesn't work on Safari 8.0

[hnrch02]

@acrogenesis What do you mean by "this doesn't work"?

[acrogenesis]

@hnrch02r it isn't applied hence the strikethrough

[hnrch02]

@acrogenesis It isn't supposed to be applied in Safari 8, it's a hack for IE 8-10. Also, it has been removed from the code base and won't be included in 3.2.1.