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

如果您必须使用背景图片，请尝试使用 CSS background-size 属性，如下所示：

    .image {
        background-image: url(banner.jpg);
        background-position: center center;
        background-repeat: none;
        background-size: cover; /* or use 'contain' */
        width: 100%;
        height: 300px;
    }

正如 htmltroll 所说，有很多方法可以解决这个问题。

Answer 2

这取决于情况，有很多方法可以解决相同的问题。当我们将图像插入代码时，您描述的方式是正确的方法。

<img src="image/source/etc/etc/" alt="" title="" />

Answer 3

把图片放在里面

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*/

做了一个小提琴：http: //jsfiddle.net/filever10/srdcY/