如何让窗口大小和设备的css背景图像比例尺

我想设置一个流体模板，我也可以用于响应式设计视口。但是现在，当我尝试调整浏览器窗口的大小时，它不能缩放，并且在我的iPhone上我只看到了标题图形的左上角部分。我有一个主包装背景和头部动画gif，都是1200px的相同宽度。任何帮助将不胜感激。如何让窗口大小和设备的css背景图像比例尺

视口

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

body { 
    background-color: #B28D66; 
    margin: 0 auto; 
} 
#Wrapper { 
    max-width:1200px; 
    width:95%; 
    background-image: url(../img/background_main.jpg); 
    background-repeat: no-repeat scroll; 
    background-position: center top; 
    height: 2200px; 
    position: relative; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Banner { 
    width: 100%; 
    height: 350px; 
    background-image: url(../img/animated-gif-header.gif); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Content { 
    width: 75%; 
    margin: 0 auto; 
} 
#Wrapper #MainNav { 
    background-image: url(../img/nav_bar.png); 
    width: 100%; 
    height: 75px; 
    margin-top: -20px; 
} 
#Wrapper #MainNav ul { 
    margin-right: 100px; 

} 

#Wrapper #MainNav ul li { 
    float: right; 
    margin-top: 15px; 
    padding-right: 21px;

来源

2013-03-23 Djacksway

您是否尝试过用媒体查询向手机提供不同的图像？这是不现实的，相同的图像将完美地填充1400px宽的笔记本电脑屏幕和320px iphone屏幕。 – staypuftman 2014-04-21 04:50:21

尝试使用以下方式的背景尺寸属性：

背景尺寸：100％自动;

，或者如果你想拥有它的高度覆盖整个页面高度使用下面

背景尺寸：汽车100％;

来源

2013-03-23 15:03:42

background-size: cover;

作品对我蛮好。

来源

2013-12-09 06:39:57

background-image: url(''); 
background: no-repeat center center cover;

这通常工作正常。

来源

2014-05-21 10:30:50

如何让窗口大小和设备的css背景图像比例尺

回答

相关问题