網頁中經常會出現正方形的設計，在切版時如果直接設定固定寬高就是破版的節奏，但單用百分比設定長寬，RWD 時還是會變得不夠正，這邊提供兩個方法：
第一個方法：直接設定固定寬高（被打
只適用在網頁很小的元素上，不受 RWD 影響、也不會導致破版，那還是可以省事點，直接設定固定寬高。
第二個方法：使用 padding 特性來撐出等比例的正方形
當 padding 設定為百分比時，所依據的單位是以父容器寬度來計算（不是本身元素），假如今天父容器寬度為 100px，子元素 padding 設定 10%，就會得出 10px按照以上特性，就可以知道子元素的 padding 和 width 百分比數值相同時，就會呈現正方形（因為它們的參考基準都是父容器的寬度），要注意 height 要設定 0，避免內容撐出多餘的高度，導致整體並不是正方形。
.box{
width: 30%;
padding-bottom: 30%;
height: 0;
}
圖片使用 img 標籤無法放入到容器中怎麼辦？
純文字和使用 background-image 語法加入圖片都可以透過上面的這個方式直接放置在容器中，但使用 img 標籤就會完全消失，主要是因為 height 已經被強制設定為 0，解決方法可以透過以下步驟：
- img 標籤使用
position: absolute，放置圖片的容器設定position: relative，透過定位方式將圖片放入到容器中 - 記得圖片也要設定寬度與高度 100%，否則不會以外層容器為基準縮放
- 搭配
object-fit: cover;避免圖片變形
.box{
width: 33%;
padding-bottom: 33%;
height: 0;
background: #000;
position: relative;
}
img{
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
希望看完這篇的你，都能順利在網頁上做出自由縮放的正方形！
若有錯誤歡迎指正，感謝看完這篇的大家。
