在網頁設計中，常常遇到需要讓一個元素的高與寬相等的情況。實現這一需求，我們通常會使用 CSS 來設置元素的尺寸。

.square{
width: 100px;
height: 100px;
}

以上代碼設置了一個寬高均為 100px 的元素，實現了高與寬相等的效果。

但是，有時候我們需要實現的元素并不僅僅是一個簡單的正方形，它可能是一個圓形或其他不規則的圖形，這個時候該怎么辦呢？

實際上，我們可以通過 CSS3 中的某些屬性來實現元素的高與寬相等，而不僅限于設置寬高相等的數值。比如，我們可以使用padding屬性的百分比值來實現高與寬相等的圓形元素。

.circle{
width: 100px;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
}

以上代碼將一個寬為 100px，高為 0 的元素通過設置padding-bottom: 100%來實現了高與寬相等的效果，并且通過設置border-radius: 50%來將其轉化為圓形。

除此之外，我們還可以使用 CSS 中的伸縮布局（flexbox）來實現元素的高與寬相等。比如，我們可以設置元素為一個 flex 容器，然后在其中設置一個伸縮項同時設置它的flex-basis和flex-grow為相同的數值。

.wrapper{
display: flex;
}
.square{
flex: 1 1 100px;
}

以上代碼將一個 flex 容器中的.square元素設置為一個伸縮項，并通過設置flex: 1 1 100px來實現了為高與寬相等的效果。

總的來說，實現元素的高與寬相等可以用多種方式，我們需要根據實際情況選擇最適合的方法來實現。