Question

在div+css中设定图片在浏览器全屏的时候宽度为浏览器的宽度，在浏览器缩小时宽度不变。

如下图 怎么改 把上面的改成下面的样子 上面的放大下边也会出现滚动条 怎么去除

代码：
<div class="header">
<div class="title">
<a href="#"><img src="images/title_a.jpg" /></a>
<span class="fr"><img class="fl" src="images/title_b.jpg" />
<img class="fr" src="images/title_c.jpg" /></span>
</div>
<div class="logo">
<img src="images/header.jpg" />
</div>
</div>
CSS：
body{ background:url(../images/background.jpg) repeat-x; margin:0px; padding:0px; vertical-align:top; font-size:12px; color:#666666;}
img{ border:0px;}
a:hover{ color:#ff7f00; text-decoration:underline;}
.fl{ float:left;}
.fr{ float:right;}
.header{ width:100%; height:476px; background-color:#FFF;}
.header .title{ width:935px; margin:auto;}
.title a{ width:270px;}
.title span{ width:665px;}
.header .logo{ height:396px; }





Answer 1

如果你非要100%显示的话
<div class=test1>
<img src="背景.jpg" />
</div>
css
.test1 img{
width:100%;
position：/*根据你自己需求定位了层,如果背景上面没有其他内容也可以不定位*/
z-index:1/*根据你定位了，如果没有定位的话这项也用不上，有内容的话，可以设计小的值如1，内容为2*/
｝

追问

不行的 这个定义的话 图片会随着浏览器的缩小而缩小的 我意思是 图片的大小是浏览器最大是的宽度 但在缩小时 这个宽度是不变的

追答

最大时是浏览器的宽度本身就只能100%，因为每个显示器的分辨率都不一样，看你设定的banner是多大咯，如果是1000PX以下可以直接居中。如果是设置1920的分辨率就居中了，还是有很大一部分用户会出现滚动条
实在不行的话。
@media screen and (min-width:1000px){
.banner{width:100%;}

}
@media screen and (max-width:1000px){
.banner{width:1000px; margin:0px auto;}

}
不过这个是CSS3，国内目前还是很大一部分

至于TL杨路所说的没居中，那如果你的BANNER是1920分辨率，你用1024的显示器看，图片的大小是浏览器最大是的宽度 怎么解决？居中估计不行吧m

所以最保险的办法一般BANNER尺寸不做得太大

追问

还是不行啊 滚动条还是在的啊 而且缩小时图不缩 但是和下面对不起来啊 浏览器最大时

缩小时

这是什么情况

追答

还要加一个是overflow-x:hidden;要兼容chrome和firefox的话,在div中加上table.对table加上绝对定位

Answer 2

你是把那个图片给到body里了吗？
可以在header里加一个<div id="banner"></div>，然后把那个图片当做banner的背景，background:url(../images/background.jpg) repeat-x scroll 0 0;
width:100%;
你试试

追问

还是不行啊 图片被固定死了啊
与下面的无法对齐啊

Answer 3

你没居中，知道么！

追问

这个也是不行的 我试过 如果当成图片插入的话 图比浏览器宽 会在下面出现滚动条 但是如果做为背景宽度为100%的话 在浏览器缩小时图片又和下面的图对不起来