0

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

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

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

从 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;
            }
        }
4

1 回答 1

1

尝试使用

background-size: cover;

属性，像这样？

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

于 2013-03-13T21:32:47.790 回答