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

时间:2016-11-06 06:13:07

标签: html css image transition image-resizing

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

Here's a fiddle - 在up&看看我的意思。

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>

感谢您的帮助! :)

1 个答案:

答案 0 :(得分:0)

实时查看Inno Setup - Automatically submitting uninstall prompts

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