要使CSS图片缩小比例不变,可以使用background-size属性。可以将其设置为"contain"或"cover"。
-
"contain"会将图片缩放到适应容器的尺寸,但保持图片的原始宽高比例。这意味着图片可能会有空白区域,但不会被裁剪。
-
"cover"会将图片缩放到填满容器的尺寸,但保持图片的原始宽高比例。这意味着图片可能会被裁剪,但不会有空白区域。
例如,可以使用以下CSS代码将背景图片缩放到适应容器的尺寸,但保持比例不变:
div { background-image: url("image.jpg"); background-size: contain; background-repeat: no-repeat; }
或者,可以使用以下代码将背景图片缩放到填满容器的尺寸,但保持比例不变:
div { background-image: url("image.jpg"); background-size: cover; background-repeat: no-repeat; }
请根据实际需求选择适合的方法。