定位全宽标题

Question

定位全宽标题。我希望它出来这样的东西。 http://meem.co.vu/

股利：

<div id="shell"> 

<div class="img"><img src="http://static.tumblr.com/ydsgqx5/f28mqvumo/waterfall-nature-wallpaper.png" width="448" height="336" alt="" /></div> 
<div id="msg"></div> 

</div> 

CSS：

#shell { margin:0; 
padding:30px; 
width:600px; 
height:400px; 
background:#eee; }
div.img { width:360px; 
height:280px; 
overflow:hidden; 
margin:auto; 
}
#banner {
width: 960px;
height: 400px;
margin: 0 auto 30px;
overflow:hidden;
float: left;
}
#banner img {
left: 0;
top: 0;
position:absolute;
}

其他链接：http://jsfiddle.net/BeCF9/55/

我似乎无法在屏幕上显示图像占据整个页面。

我怎样才能做到这一点？

谢谢。

Answer 1

检查JSfiddle

http://jsfiddle.net/BeCF9/58/

#shell { margin:0; background:#eee; }
div.img { width:100%; overflow:hidden; margin:auto; border:1px solid #333; }

检查屏幕截图，其中将div.img设置为100％也会将img宽度覆盖为100％。

希望下面的截图看起来像你想要的

Answer 2

我是meem.co.vu的老板！

首先，我非常高兴你赞赏我的标题设计。由于我不再使用您所引用的特定网站布局，因此人们可能无法获得您想要提出的内容。

我在屏幕上将标题设置为完整大小的行为是width: 100%;。为了使背景也保持完整，我在CSS中添加了background-size: cover;。我希望这有帮助。 ：）