Question

哎，

我一直试图解决这个问题很长时间....请帮忙。

所以我试图设置一个背景图片，只使用css / html。图像非常大我想缩小它以适合任何时间的宽高比。我已经搜索了遍布stackoverflow甚至尝试了一些建议：

CSS background image to fit width, height should auto-scale in proportion

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

以下是我在IE浏览器中的显示效果： http://i829.photobucket.com/albums/zz217/prakash911/site_zps36d59541.png

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

<!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>

Answer 1

我所知道的是......并且已经在很多网站上看到过..背景图片不能自动缩放。它只是放在中心，任何屏幕宽高比看起来都很好。

例如：

Background image

Website

Answer 2

这是一个小提琴。

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>

您要将background-size设置为包含

Answer 3

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/

使用浏览器无法正确缩放图像

3 个答案: