css - 图像跨页 100%

Question

如何在页面上获取图像作为横幅？下面显示的是我的代码，请给我一个解决方案。

.image {
background: url(banner.jpg) center no-repeat;
width:100%; 
height: 300px; <-- Image height
}

最好的方法？

然后将该 css 应用于分类的 div？

<div class="image" alt="" title="">
</div>

Answer 1

把图片放在里面

html

<div class="image">
    <img src="banner.jpg"/>
</div>

CSS

.image {
    display:block;
    position:relative;
    overflow:hidden;/*keeps the image in the container*/
    height: 300px
}
.image img{position:absolute;bottom:0;width:100%}/*this is aligned to the bottom, may need to be top or center depending on the circumstances*/

做了一个 fiddle :http://jsfiddle.net/filever10/srdcY/