IE11 неправильно изменяет размер динамически загружаемого изображения

Question

Я работаю над лайтбокс, где я бы хотел как можно больше сделать в CSS. Я использую модули видового экрана, чтобы сделать все это отзывчивым. К сожалению, IE (я протестировал его в версии 11) не изменяет размер динамически загружаемых изображений.

Сравните следующие jsfiddle и измените размер вашего браузера, чтобы узнать, что я имею в виду.

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> 

Любые мысли о том, как обойти это?

Answer 1

IE10 + было странно с width и height атрибутами (которые, кажется, должны быть добавлены автоматически в данном случае), поэтому мы заменим их:

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

Demo