css - 根据 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 */