IE11 not properly resizing dynamically loaded image

Question

I'm working on a lightbox where I'd like to do as much as possible in CSS. I'm using viewport units to make the whole thing responsive. Unfortunately IE (I've tested it in version 11) doesn't resize dynamically loaded images properly.

Compare the following jsfiddle's and resize your browser to see what I mean.

Static image

<div class="lightbox lightbox--active">
    <div class="lightbox__inner">
        <div class="lightbox__content" data-lightbox-content="">
            <img src="path/to/image">
        </div>
    </div>
</div>

Dynamically loaded image

<div class="lightbox lightbox--active">
    <div class="lightbox__inner">
        <div class="lightbox__content" data-lightbox-content="">
            <!-- Image loaded with JS -->
        </div>
    </div>
</div>

Any thoughts on how to work around this?

Answer 1

IE10+ has been weird with the width and height attributes (which seem to be added automatically in this case), so we'll override them:

.lightbox .lightbox__content img {
    ...
    width: auto;
    height: auto;
}

Demo