IE11不能正确调整动态加载图像的大小

Question

我正在做一个灯箱，我想做尽可能多的CSS。我使用视口单位让整个东西响应。不幸的是，IE(我已经在版本11中测试过)不能正确地调整动态加载的图像的大小。

比较下面的jsfiddle并调整浏览器的大小来理解我的意思。

静态图像

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

动态加载图像

<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;
}