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

Question

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

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

Answer 1

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

Answer 2

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

示例：

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

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

Answer 3

背景尺寸会起作用，但图片的纵横比会发生变化。下面500px是已知高度。

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

有关背景大小的更多信息 here，<= IE8 不支持它。

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

img.cover {
    width:100%;
    height:100%;
    position:absolute:
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1;
}

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 的大小

Scale background image width to the size of the div

html

css

background-image

responsive-design