保持正圓或正方形的圖片

今天要介紹的是如何使用CSS讓不同尺寸的圖片看起來都是正圓或正方形，而且畫面放大縮小都會是正圓或正方形喔。

這個對於RWD網站可真是好用啊ˊvˋ

成果就像這樣：

有沒有覺得很神奇阿（被毆

1.先看看範例的程式

測試環境為 Google Chrome in Windows，物件為純圖片，圖片底下不帶說明或標題。

根據物件顯示的資料大致可分為兩種：純圖片版本，以及圖片下帶有標題的版本。範例是純圖片的版本。

範例的程式如下：

而圖片下多了標題的話，則視需要再加上標題的設定：

這份正圓的css設定有幾個關鍵：

大概就以上這四個。至於那個邊角50%，因為今天介紹範圍有「正圓」，所以才會有這行這定。如果將圖片邊角50%拔除，那圖片就會從「正圓」變成「正方形」。

接下來就那四個關鍵做說明。

首先看看各大瀏覽器對他的支援：

可以看到萬惡的IE和IE骨的Edge那慘烈的支援度……雖然不是無法可解，但說多都是淚。詳細介紹與解法本篇文章不會細加說明（篇幅問題，光解法和實際應用就是一篇文章了），但會稍微帶過，有興趣的可以上網自行搜尋，或等某貓。今天就以Chrome為主要測試環境。

object-fit的效果就是「讓容器內被設定此性質的圖片符合容器尺寸，且圖片內容不會變形」。

容器可以是像範例那樣，圖片外層一個div，或者「圖片本身就是容器」。

效果就會像這樣：

可以看到第一張形變的圖，加上object-fit:cover後不形變了！但眼尖的同學應該有發現圖片好像有部分出框了齁……恩這就是cover的效果。

object-fit常用的就 cover或contain。cover是讓圖片不形變填滿容器，多於會超出容器。contain則是只讓圖片高或寬某一邊填滿容器，另一邊維持原比例。像這樣：

為了讓容器明顯點，某貓多加了一圈紅色邊線。兩種效果差別很多吧，特別在圖片與容器的比例想差極多時（正方形容器與長方形圖片），那個效果相差更大。

這是讓圖片保持正圓／正方形的關鍵喔，padding-top:100% 意思是「讓元素padding-top父元素寬度100%的距離」，注意，是「父元素寬度」喔！

對範例一的 .circle-spacer 來說，padding-top:100% = .img-circle 的 width:30%，於是便切割出一塊等比例的空間了！

這個則是為了讓圖片「歸位」而做的設定，同時必須搭配的是容器的 position:relative。容器沒有設定的話，圖片是無法順利歸位的喔。

加上位置設定後，別忘了將四邊（top / right / bottom / left）設定為 0（表示完全貼合切割出的容器）。

以上就是這個等比正圓的小技巧。

其實已經打完了，但有幾點要提一下。

padding-top 吃的是父元素，也就是容器的寬度。如果 padding-top:100%，那容器本身就別設定高度。一旦設定高度，padding-top還是能切割出等比例的高，但圖片在顯示時會被容器本身寫死的高度影響，導致圖片不會是1:1等比例的容器，而是長方形。
object-fit在IE是不支援的，那在IE下會變成怎樣呢？不會怎樣，就是圖片形變而已（淚）。padding-top這個屬性倒是沒問題（測試環境：win7的IE11）。
object-fit在IE的設定可以使用 background-size 進行設定，有興趣的同學可以自行上網搜尋。