1

啊，

我一直在努力解决这个问题......请帮忙。

所以我试图设置一个背景图片，只使用 css/html。图像非常大，我想将其缩小以完美适应任何时间的纵横比。我搜索了整个stackoverflow，甚至尝试了这里的一些建议：

CSS背景图像以适应宽度，高度应按比例自动缩放

但没有任何工作......

这是它在我的 IE 浏览器中的外观：http: //i829.photobucket.com/albums/zz217/prakash911/site_zps36d59541.png

实际图片：http: //i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png

示例测试演示：http: //jsfiddle.net/4GkFu/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style="overflow:hidden;">

        <div id="divimg" style="position:absolute; left:0px; top:0px; right:0px; bottom:0px; overflow:hidden;" >
            <img src="img/background.png" style="position:absolute; left:0px; top:0px; width:100%; height:auto;"/>
        </div>

    </body>
</html>
4

3 回答 3

1

我所知道的是......并且在许多网站上看到它......背景图像不会自动缩放。它只是放置在中心，在任何屏幕纵横比下看起来都很好。

例如：

背景图片

网站

于 2013-06-13T18:13:59.790 回答
-1

这是一个小提琴。

http://jsfiddle.net/4GkFu/9/

我所做的只是将图像移动到您要填充的 div 的背景图像。

我不确定这是否是你想要的

<body style="overflow:hidden;">
    <div id="divimg" style="position:absolute; left:0px; 
top:0px; right:100px; bottom:0px; overflow:hidden;
background-image: url('http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png'); background-size: contain;
background-repeat: no-repeat;
"></div>
</body>

您想将背景大小设置为包含

于 2013-06-13T18:15:04.387 回答
-1 
body {
    margin: 0;
    background: red     url('http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png') 0 0 no-    repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;

}

http://jsfiddle.net/4GkFu/6/

于 2013-06-13T18:18:36.717 回答