Question

我有一个宽度未知的div。我希望它有一个大的背景图像。

如何将背景图像宽度设置为div本身的宽度？（div的高度已知）。

Answer 1

背景大小将起作用，但图像的宽高比将会改变。 500px以下是已知的高度。

int fun(int a[25],int ele)
{

    int flag=0,i=0;
    while(a[i]!=NULL)
    {
        flag++;
        i++;
    }
    return flag;
 }

有关背景大小here的更多信息，＆lt; = IE8不支持。

或者您也可以绝对定位相对于容器的图像，但背景尺寸更好。

.myDiv {
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-size: 100% 500px;
}

Answer 2

.myDiv {
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-size: contain; (you could also use cover here)
}

Answer 3

在div和background-size css propierty中使用背景图片。

示例：

#im {
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: cover;
}

您还可以将图片宽度设置为100％以填充内容div。要使用高度100％，您需要指定div高度。

Answer 4

以下CSS属性将使背景宽度适合动态容器：

.myDiv {
    background-size: 100%; /* fit width to container */
    background-repeat: no-repeat; /* do not repeat background */
    height: 200px; /* height is known */
}

查看example on JSFiddle

将背景图像宽度缩放到div的大小

4 个答案: