Question

我有一个我无法解决的问题，我需要我的横幅是全宽的，而不是盒装的。例如：页面是1024px witdh，我的横幅是800px宽度，现在我需要我的横幅是100％宽度。如果你了解我，那么，我的朋友和我，我们尝试了很多选择，但我们没有弄明白。

这是带有横幅的CSS代码：

#banner{
    background-image: url(mats/banner.jpg);
    width: 100%;
    height: 470px;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    display: block;        
}

我已经尝试了一切，但没有成功。

Answer 1

是背景大小。

background-size: 100%;

应用此属性时，背景图像（800px宽度）将拉伸至1024px，从而导致图像质量下降。更好地在宽度> gt的图像上应用此属性1200像素

如果高度：470px也用作背景高度，请不要使用它。永远不要设置高度和在图像上的宽度，它会改变宽高比。如果设置了一个，则另一个将根据自动调整，否则图像看起来缩小或拉伸

Answer 2

我想你可能会错过背景大小

 #banner{
        background-image: url(mats/banner.jpg);
        background-size: 100%;
        width: 100%;
        height: 470px;
        background-repeat: no-repeat;
        position: relative;
        background-position: center;
        display: block;

}

html和css宽度的横幅

2 个答案: