Question

我已经在网上，这里和其他地方搜索了几个小时，一个简单的代码允许我放置一个img（在这种情况下我使用SVG）相应地拉伸和倾斜浏览器窗口大小。 ..但是每个人都在谈论保持宽高比的代码......我不想保持这个比例，我只是想强制将img / svg拉伸到浏览器的4个边缘......任何人都有一个简单的那个代码？

我一直在使用

width:100%;
position: fixed; 
left: 0px; 
top: 0px; 
z-index: 7;
background-size:100% 100%;

但无济于事..

Answer 1

在HTML中，背景图像和实际图像实际上有更多的灵活性。

我使用的方法是创建div元素并将其background-image设置为您要显示的图像。

有点链接：

#imageDiv
{
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-image:url('https://www.gravatar.com/avatar/dd3f93d8f93c5908d58711ff9092ba02?s=328&d=identicon&r=PG');
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:1;
}

请参阅此jsfiddle：http://jsfiddle.net/2t17onko/2/

CSS img填充broswer窗口而不保持宽高比

1 个答案: