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

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

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

Answer 2

将图片放入

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/

Answer 3

如果必须使用背景图像，请尝试使用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所说，有很多方法可以解决这个问题。

图片跨页100％

3 个答案: