CSS - 有 16 个 :9 image fill body, 但比例保持在 4:3

Question

我希望有一个图像填充页面 100% 的宽度和高度。

我找到了一些 CSS，不记得现在在哪里，它执行此任务 - 但是我的图像是 16:9，当在 4:3 显示器上查看时，图像会被压扁以适应较窄的宽度。

因此，在 16:9 上，图像会整齐地适合，而在其他分辨率(或浏览器尺寸)下，图像会集中并被裁剪，因此会丢失边缘。

从Fiddle可以看出，测试图像中的白色方 block 不是正方形。

fiddle :http://jsfiddle.net/7h6yt/

还有 CSS/HTML。

<img src=http://i47.tinypic.com/izyqyv.jpg>

        body{
            margin: 0;
        }

        img{
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto;
            position: fixed;
            top: 0;
            left: 0;
        }

        @media screen and (max-width: 1024px){
            img{
                left: 50%;
                margin-left: -512px;
            }
        }

Answer 1

尝试使用

background-size: cover; 

属性，像这样？

http://jsfiddle.net/7h6yt/1/