我要成為切版魔法師 #1 - 不管啦，就是要正方形！

網頁中經常會出現正方形的設計，在切版時如果直接設定固定寬高就是破版的節奏，但單用百分比設定長寬，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，解決方法可以透過以下步驟：

1. img 標籤使用 position: absolute ，放置圖片的容器設定 position: relative，透過定位方式將圖片放入到容器中
2. 記得圖片也要設定寬度與高度 100%，否則不會以外層容器為基準縮放
3. 搭配 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;
}

希望看完這篇的你，都能順利在網頁上做出自由縮放的正方形！

若有錯誤歡迎指正，感謝看完這篇的大家。