通过缩小内容来防止溢出

Question

我想要左上角的（动画gif）图像。它永远不应该大于图像的实际大小。如果身体要小到显示整个图像，那么图像应该显示得更小，成比例！

我让它使用背景图像，但我想通过点击它来重放gif，这不能使用背景图像，所以我回去使用图像标记。

在宽度方面效果很好，然而，它的高度却没有。

width = good：

身高=不好：

这里是代码：

<div id="gifdiv">
    <img src="images/someImg.png"/>
</div>





    body {

        padding: 0;
        border: 0;
        margin: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #gifdiv {
        width: 100%;
        height: 100%;
        max-width: 660px;
        max-height: 370px;
    }

    img {
        width: 100%;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat; 
    }

这是代码，如果重要的话。

    $(document).ready(function() {

        $("#gifdiv").click(function () {
            // first time we replace png to gif
            // after that we just set the same thing again
            // which makes the gif play again from the start            
            var img = $(this).find("img").get(0);  
            var imgSrc = img.src;
            imgSrc = imgSrc.replace(".png", ".gif");
            img.src = imgSrc;     

      });

    });

那么如何才能使高度不超过窗户高度？

小提琴（没有gif） http://jsfiddle.net/clankill3r/gLmdwqg8/

Answer 1

我认为这可能就足够了：

img {
    max-width: 100%;
    max-height: 100%;
    background-size: contain;
    background-repeat: no-repeat; 
}

您的主要问题是，由于您的图片宽度为100％，如果没有足够的地方，高度（自动或不高）都无法降低。

http://jsfiddle.net/gLmdwqg8/1/