html - 通过缩小内容来防止溢出

Question

我想要左上角的(gif 动画)图像。它不应该大于图像的实际大小。如果 body 太小而无法显示整个图像，那么图像应该显示得更小，成比例!

我在使用背景图像的情况下工作，但我想通过单击它来重播 gif，但使用背景图像不起作用，所以我又回到使用图像标签。

在宽度上效果很好，但在高度上效果不佳。

宽度=好:

高度=不好:

这里是代码:

<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;     

      });

    });

那么怎样才能让高度不超过窗口高度呢？

一把 fiddle (没有动图) 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/