CSS固定寬高比例是指在一個盒子中,其寬度和高度是按照固定比例來設置的。比如我們經常會用到的16:9比例、4:3比例等等。那么如何用CSS實現固定寬高比例呢?下面就來詳細介紹一下。
首先,我們需要使用一個包含內容的容器來實現寬高比例。假設我們想要實現16:9的寬高比例,那么我們可以給這個容器設置一個高度為0的padding-bottom值,值為56.25%(也就是9除以16乘以100%),如下所示:
.container { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; }
注意,這里的position屬性要設置為relative,以便后面的絕對定位可以參照這個容器。
接下來,我們需要把容器里面的內容放在一個絕對定位的子容器中。子容器的寬度和高度都要設置為100%,并且要絕對定位在容器的左上角,如下所示:
.container >.content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
這樣,我們就完成了一個固定16:9比例的容器。當容器變化大小的時候,其內部的子容器也會按照同樣的比例自動縮放,保證寬高比例不變。
需要注意的是,這種方法只是保證了容器的寬高比例,對于容器內部的內容,它們的寬度和高度都需要按照這個比例來設置。具體實現方法根據具體情況而定,比如常見的圖片、視頻等內容可以用CSS的background-image屬性來實現。