IE11没有正确调整动态加载的图像的大小

Question

我正在处理一个灯箱，我想尽可能地在CSS中进行操作。 我使用视口单位使整个事情响应。 不幸的IE浏览器（我已经在版本11中测试过）不能正确调整动态加载的图片大小。

比较下面的jsfiddle's并调整浏览器的大小以查看我的意思。

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