根据div CSS的宽度和高度缩放背景图像

Question

有没有办法根据div宽度和高度缩放背景图像？仅使用CSS。

Answer 1

我使用background-size: cover作为我的全尺寸bg图像。如果您不喜欢该结果，可以在div中设置图像并提供以下任一项：

容器的整个宽度，保持纵横比：

width    : 100%;
height   : auto;
position : absolute;
z-index  : 0; /* something lower than content */

容器的整个高度，保持纵横比：

width    : auto;
height   : 100%;
position : absolute;
z-index  : 0; /* something lower than content */

容器的整个宽度和高度，将会变形和变形拉伸：

width    : 100%;
height   : 100%;
position : absolute;
z-index  : 0; /* something lower than content */