CSS如何讓背景圖片不變形

在CSS中，我們可以使用背景圖片作為元素的背景，但是有時(shí)候由于圖片的尺寸和元素的尺寸不匹配，導(dǎo)致圖片出現(xiàn)變形的情況，為了讓背景圖片不變形，我們可以使用CSS的background-size屬性來控制圖片的尺寸。

background-size屬性可以指定背景圖片的寬度和高度，如果只需要保持圖片的寬高比不變，可以使用contain或cover值。contain值會(huì)讓圖片保持原始尺寸，但是可能會(huì)留下空白區(qū)域；而cover值則會(huì)將圖片縮放***完全覆蓋元素，但是可能會(huì)出現(xiàn)裁剪的情況。

假設(shè)我們有一個(gè)元素，其尺寸為300px200px，我們想要將一張尺寸為600px * 400px的圖片作為背景，并保持圖片不變形，我們可以使用以下CSS代碼

element {
  background-image: url('image.jpg');
  background-size: contain;
}

這樣，圖片就會(huì)保持其原始尺寸600px400px，并顯示在元素的中央，但是會(huì)留下一些空白區(qū)域，如果想要完全覆蓋元素，可以使用cover值

element {
  background-image: url('image.jpg');
  background-size: cover;
}

這樣，圖片就會(huì)被縮放***300px * 200px，并完全覆蓋元素，但是可能會(huì)出現(xiàn)裁剪的情況。

使用background-size屬性可以輕松地讓背景圖片不變形，并且可以根據(jù)需要選擇保持原始尺寸或完全覆蓋元素。