css圖片縮小比例不變的方法是什么

css
小億
674
2023-07-19 20:30:52
欄目: 編程語言

要使CSS圖片縮小比例不變，可以使用background-size屬性?？梢詫⑵湓O(shè)置為"contain"或"cover"。

  • "contain"會(huì)將圖片縮放到適應(yīng)容器的尺寸，但保持圖片的原始寬高比例。這意味著圖片可能會(huì)有空白區(qū)域，但不會(huì)被裁剪。

  • "cover"會(huì)將圖片縮放到填滿容器的尺寸，但保持圖片的原始寬高比例。這意味著圖片可能會(huì)被裁剪，但不會(huì)有空白區(qū)域。

例如，可以使用以下CSS代碼將背景圖片縮放到適應(yīng)容器的尺寸，但保持比例不變：

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;
}

請(qǐng)根據(jù)實(shí)際需求選擇適合的方法。

0 踩