現(xiàn)在，越來(lái)越多的網(wǎng)站都會(huì)使用圖片，而為了使圖片在不同設(shè)備上的顯示效果更好，我們需要對(duì)它們進(jìn)行自適應(yīng)長(zhǎng)寬的處理。 幸好， CSS 提供了幾種方法來(lái)使圖片自適應(yīng)長(zhǎng)寬。讓我們來(lái)看看這幾種方法： 1. 使用max-width 通過(guò)使用max-width屬性，圖片將會(huì)在其實(shí)際大小和其所在容器的大小之間取一個(gè)較小值。 例如： pre{ max-width: 100%; } 這個(gè)代碼段會(huì)將圖片的最大寬度設(shè)置為其所在容器的 100%。 2. 使用width和height 使用width和height屬性，我們可以明確告訴瀏覽器圖片的大小，讓圖片按照指定的比例來(lái)進(jìn)行縮放。 例如： pre{ width: 100%; height: auto; } 這個(gè)代碼段將圖片的寬度設(shè)置為其所在容器的 100%，高度會(huì)根據(jù)圖片的比例自動(dòng)進(jìn)行縮放。 值得注意的是，這種方法可能會(huì)對(duì)圖片的質(zhì)量產(chǎn)生影響。縮放的過(guò)程中，圖片的像素可能出現(xiàn)失真或變形，導(dǎo)致圖片變得模糊或者不清晰。 3. 使用object-fit 使用object-fit屬性，我們可以指定圖片的尺寸適應(yīng)方式。其有以下幾種取值：fill（將圖片拉伸至填滿所在容器）、contain（使圖片在所在容器內(nèi)等比例縮放，保證圖片能夠完全顯示）、cover（使圖片縮放并裁剪，保證圖片填滿所在容器）、none（保持圖片原有大小，不進(jìn)行縮放）等。 例如： pre{ width: 100%; height: 100%; object-fit: contain; } 這個(gè)代碼段將圖片縮放至適應(yīng)其所在容器，并且保證圖片能夠完全顯示。 總之，在進(jìn)行圖片自適應(yīng)長(zhǎng)寬處理時(shí)，我們需要根據(jù)實(shí)際需求選擇不同的方法。以上三種方法，各有優(yōu)缺點(diǎn)，需要結(jié)合實(shí)際情況進(jìn)行選擇。