html - 使img标签宽高100%在overflow hidden div内同时保持纵横比

Question

我需要使 img 标签的宽度和高度在 overflow hidden div 内保持 100%，同时保持纵横比。

我的目的是将图像放在 overflow hidden div 中，图像的最大宽度为 100%，高度为自动。

<div id="foo">
    <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
</div>

但我面临的问题不是 go height 100%

查看运行中的代码 http://fiddle.jshell.net/TARwL/

仔细观察 div#cover 是 100% 宽度和高度，看起来很完美，我希望我的代码也能做到这一点

我无法使用 background-size:cover 方法，因为 beside 在旧版浏览器中不起作用，我无法单击右键并保存图片，这对我很重要

Answer 1

我重新考虑并找到了适合我的解决方案，我不知道是否适合其他人!!

图像将覆盖背景大小，同时我将在同一个 div 中添加图像，宽度和高度为 100%，不透明度为 0

所以图像会像封面一样显示，任何人都可以点击同一区域并像正常一样使用图像(复制链接、下载等)

HTML

<div style="background-image:url(http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg)">
    <img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" />
</div>

CSS

 div{
        width: 300px;
        height: 300px;
        display:inline-block;
        vertical-align: top;
        background-size:cover;
        background-position:50% 50%;
    }

    div img{
        width: 100%;
        height: 100%;
        opacity: 0;
        /* OLD IE */
        zoom: 1;
        filter: alpha(opacity=0);
    }

代码实战 http://jsfiddle.net/Jim_Toth/mVtJc/1/