要使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;
}
請根據實際需求選擇適合的方法。