如何设置790px的固定宽度图像?如何在完整图像显示的同时使其响应?我的代码就像轰鸣声。
<div class="span10 offset1">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div style="text-align: center">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
我的css是:
.navbar-inner{
background-color: transparent;
background-image: url("../img/nav_bg.png");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 62px;
width:88%;
text-align: center;
margin: 0 auto;
min-width: 320px;
max-width: 790px;
border: 0;
}
这是我的形象 当我在iPad或iPhone上看到它时,它会切割图像(两侧的按钮)并显示部件。像波纹管.. 我做错了什么?
答案 0 :(得分:2)
您需要使用CSS3 background-size
属性,并将其设置为cover
。正如João所指出的,这只适用于支持此属性的浏览器(IE9 +,Firefox 4 +,Opera,Chrome和Safari 5 +)。
<div class="span10 offset1">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div style="text-align: center">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.navbar-inner {
background-size:cover;
}