首先，我們需要了解背景圖片不變形的原理。一般情況下，background-size屬性可以控制背景圖片的大小，但是當我們使用cover或contain值時，圖片會被壓縮或拉伸以適應容器大小，從而導致圖片變形。那么該如何解決這個問題呢？ 解決方法是將背景圖片改為使用background-image和img標簽結合的方式，利用CSS樣式控制img標簽的大小來實現背景圖片不變形。 代碼如下： pre{ background-color: #f5f5f5; padding: 10px; font-size: 14px; }

以上代碼中，我們將背景圖片設置為一個div的背景，同時在div中插入一個img標簽來顯示背景圖片。通過設置img標簽的object-fit屬性為cover，實現背景圖片填充整個容器而不變形。同時，利用padding-bottom將圖片高度占容器的50%，實現占位作用。最后通過background-size、background-repeat和background-position設置背景圖片的適應模式和位置，如此就實現了背景圖片不變形。 總之，使用img標簽結合CSS樣式控制背景圖片大小，可以很好地解決背景圖片變形的問題，同時可以更靈活地控制背景圖片的樣式和位置。