CSS 如何實現寬高相等 在網頁開發中，許多情況下需要使元素的寬高相等，如制作方塊圖、網格布局等，那么該如何實現呢？ 方法一：利用 padding 最簡單的方法就是利用 padding 來實現。我們設置一個 div，寬高為 auto，然后給它設置一個 padding-bottom 或 padding-top 或 padding-left 或 padding-right，讓它的值與寬度相等即可。 代碼如下:

div{
width: auto;
height:auto;
padding-bottom:100%;
}
/* 說明：這里設置 padding-bottom 為 100% 是因為 width 和 height 都是 auto，所以不一定要用 padding-bottom*/

方法二：利用偽元素 除了 padding 外，我們還可以利用偽元素 ::before 或 ::after 來實現寬高相等。代碼如下：

div{
width: 200px;
height: auto;
position:relative;
}
div::before {
content: "";
display: block;
padding-top: 100%; /*等同于 height:0; width:100%;*/
}
/* 說明：這里的 100% 是相對于父元素的寬度來計算的 */

方法三：利用 transform CSS3 中引入了 transform 屬性，我們可以設置一個元素為正方形，然后通過 transform:scale() 來改變其大小，從而實現寬高相等。 代碼如下：

div{
width: 200px;
height: 200px;
background-color: #f00;
transform: scale(1, 1);
}
/* 說明：這里的 transform: scale(1, 1) 表示沒有縮放 */

方法四：利用 grid 布局 CSS3 中的新特性 grid 布局也可以實現寬高相等。我們可以先設置一個 grid 容器，然后將子元素的寬高設置為 1fr 即可。 代碼如下：

.wrapper{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.grid{
width: 100%;
height: 1fr;
background-color: #f00;
}
/* 說明：這里的 1fr 表示平均分配剩余空間 */

以上就是幾種實現寬高相等的方法，不同的情況使用不同的方法，可以更好地實現需求。