CSS圖片高度等于寬度是一種非常實用的技巧，尤其在響應式設計中更加方便。CSS提供了幾種方式來實現這個效果，以下是一些示例代碼。

/* 通過給父級元素設置寬度和padding來實現 */
.parent {
width: 50%;
padding-top: 50%; /* height = width * (100 / 50) */
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 圖片等比例填充容器 */
}
/* 通過偽元素來實現 */
.container {
position: relative;
width: 50%;
}
.container::before {
content: "";
display: block;
padding-top: 100%; /* height = width */
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

以上代碼中，第一種方式通過給父級元素設置寬度和padding，利用百分比計算出高度來實現。第二種方式則是利用偽元素和絕對定位來實現，這種方式需要額外添加一個偽元素，但不需要改變原先的HTML結構。兩種方式均使用了object-fit: cover;來使圖片按比例填充容器。

總之，通過CSS實現圖片高度等于寬度是一種非常方便的技巧，在響應式設計中也能提供更好的用戶體驗。