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

Question

是否有办法根据div宽度和高度缩放背景图像?

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 */