具有最大宽度和最大高度过渡的图像，在正确调整大小之前会变大

Question

我正在动态调整具有最大宽度和最大高度的图像大小（我需要两者）。我有一个按钮，可以更改页面布局并通过切换类来转换图像的最大宽度和最大高度。 问题是调整大小时的图像在正确调整大小之前会变大。 请注意，仅调整视口大小时不会发生这种情况。

Here's a fiddle - 上下切换看看我的意思。

CSS：

.viewer {
    display: inline-block;
}

.viewer img {
    max-width: 41.36vw; max-height: 90.16vh;
    margin: 1.19vh 0.64vw;
    display: block;
    transition: all 2s;
}

#content.vertical img {
    max-width: 90.16vw; max-height: 41.36vh;
    margin: 0.64vh 1.19vw;
}

HTML：

<section id="welkomContent">
        <h1>Welkom</h1>
        <div class="contentWrapper"><div class="contentContainer">
            <div class="viewer">
                <img src="http://images6.fanpop.com/image/photos/36600000/Lions-image-lions-36609573-1440-900.jpg" alt="Portret"/>
            </div>
        </div></div>
    </section>

感谢您的帮助！ :)

Answer 1

实时取景jsfiddle

您需要删除 transition: all 2s; 来自 .contentWrapper 和 .viewer img 两者。 现在检查我的 jsfiddle 是否已解决。