最大宽度和宽度的图像最大高度转换，在正确调整大小之前变大

Question

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

Here's a fiddle - 在up＆amp;看看我的意思。

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

实时查看Inno Setup - Automatically submitting uninstall prompts

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