css - IE11 无法正确调整动态加载图像的大小

Question

我正在开发一个灯箱，我想在其中尽可能多地使用 CSS。我正在使用视口(viewport)单元来使整个事物响应。不幸的是，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