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>

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

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

1 个答案: