Bootstrap responsive image in table fails in IE11

Question

I have a table cell that includes an image that should be 50% of the cell's width.

The code works in Chrome, Firefox, and Edge, but in IE11 instead of taking on 50% of the cell's width, large images just take on 50% of their native size.

Here is a fiddle using a 800px wide image. Works fine except in IE11, where the image displays as 400px wide instead of responsive: https://jsfiddle.net/43Tesseracts/9knqerj7/4/

Here is the relevant html with bootstrap:

    <td>
          <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg"
             style="max-width:50%;"
             >
          The image beside me should appear 50% of the cell, not 50% of it's native size.  WOorks in Chrome, FF, Edge, but NOT IE 11
    </td>

There appear to be many similar issues on SE, but they are all much older, or use an older version of Bootstrap. I'm using Bootstrap 3.3.7

Have you tried Bass Jobsen [answer](http://stackoverflow.com/a/18859037/5588347)? Also try to set `max-width:100%` — StackUseR, Jan 04 '17 at 06:42
Yes and yes. I was able to reproduce in a fiddle. http://jsfiddle.net/43Tesseracts/jtL6qujL/1/ — 43Tesseracts, Jan 04 '17 at 06:51

score 1 · Answer 1 · answered Aug 03 '17 at 14:16

there is no need for extra div's. you can set the following css property on the table element:

table{
    table-layout: fixed;
}

i updated your fiddle with a working example:

https://jsfiddle.net/9knqerj7/10/

(in addition, i changed the img to be a block element and float left, but that is not required for the responsiveness - just looks better IMHO)

score 0 · Answer 2 · answered Jan 04 '17 at 11:09

You could solve this issue using divs like i did here:

<td>
    <div style="display: flex;">
        <div style="width: 50%">
            <img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg" style="width: 100%">
        </div>
        <div style="width: 50%">
            THe image beside me should appear 50% of the cell, not 50% of it's native size.  WOorks in Chrome, FF, Edge, but NOT IE 11
        </div>
    </div>
</td>

Working solution: https://jsfiddle.net/9knqerj7/8/

Bootstrap responsive image in table fails in IE11

2 Answers2