CSS中實(shí)現(xiàn)等比寬高的功能是很常見的需求。例如，在一個(gè)響應(yīng)式網(wǎng)站中，我們經(jīng)常需要保證圖片在不同設(shè)備上的顯示寬度和高度比例不變，以免圖片變形。下面我們來介紹兩種方法實(shí)現(xiàn)CSS等比寬高。

方法一：
img {
width: 100%;
height: auto;
}

這個(gè)方法的原理是將圖片的寬度設(shè)置為100%，高度自動(dòng)適應(yīng)。這樣就能保證圖片在原有比例下縮放。這種方法的優(yōu)點(diǎn)是簡單易用，代碼量少，但缺點(diǎn)是只能在圖片外層為塊級(jí)元素時(shí)生效。

方法二：
.container {
position: relative;
}
.container img {
position: absolute;
width: 100%;
height: 100%;
}

這個(gè)方法的原理是先設(shè)置一個(gè)包裹圖片的容器為相對定位，再將圖片設(shè)置為絕對定位，寬高均為100%，這樣就能保證圖片等比例縮放并居中顯示。這種方法的優(yōu)點(diǎn)是能夠適用于各種布局下，但缺點(diǎn)是需要額外的包裹元素。