今天要介紹的是如何使用CSS讓不同尺寸的圖片看起來都是正圓或正方形,而且畫面放大縮小都會是正圓或正方形喔。
這個對於RWD網站可真是好用啊ˊvˋ
成果就像這樣:
1.先看看範例的程式
測試環境為 Google Chrome in Windows,物件為純圖片,圖片底下不帶說明或標題。
根據物件顯示的資料大致可分為兩種:純圖片版本,以及圖片下帶有標題的版本。範例是純圖片的版本。
範例的程式如下:
而圖片下多了標題的話,則視需要再加上標題的設定:
這份正圓的css設定有幾個關鍵:
- object-fit:cover
- 因為使用外容器,圖片的寬與高須強制設定為100%
- .circle-spacer絕對必須存在的屬性:padding-top: 100%
- position的設定
大概就以上這四個。至於那個邊角50%,因為今天介紹範圍有「正圓」,所以才會有這行這定。如果將圖片邊角50%拔除,那圖片就會從「正圓」變成「正方形」。
接下來就那四個關鍵做說明。
2.程式重點說明
2.1.object-fit
首先看看各大瀏覽器對他的支援:
可以看到萬惡的IE和IE骨的Edge那慘烈的支援度……雖然不是無法可解,但說多都是淚。詳細介紹與解法本篇文章不會細加說明(篇幅問題,光解法和實際應用就是一篇文章了),但會稍微帶過,有興趣的可以上網自行搜尋,或等某貓。今天就以Chrome為主要測試環境。
object-fit的效果就是「讓容器內被設定此性質的圖片符合容器尺寸,且圖片內容不會變形」。
容器可以是像範例那樣,圖片外層一個div,或者「圖片本身就是容器」。
效果就會像這樣:
object-fit常用的就 cover或contain。cover是讓圖片不形變填滿容器,多於會超出容器。contain則是只讓圖片高或寬某一邊填滿容器,另一邊維持原比例。像這樣:
2.2.padding-top: 100%
這是讓圖片保持正圓/正方形的關鍵喔,padding-top:100% 意思是「讓元素padding-top父元素寬度100%的距離」,注意,是「父元素寬度」喔!
對範例一的 .circle-spacer 來說,padding-top:100% = .img-circle 的 width:30%,於是便切割出一塊等比例的空間了!
2.3.圖片的 position: absolute
這個則是為了讓圖片「歸位」而做的設定,同時必須搭配的是容器的 position:relative。容器沒有設定的話,圖片是無法順利歸位的喔。
加上位置設定後,別忘了將四邊(top / right / bottom / left)設定為 0(表示完全貼合切割出的容器)。
以上就是這個等比正圓的小技巧。
3.注意事項
其實已經打完了,但有幾點要提一下。
- padding-top 吃的是父元素,也就是容器的寬度。如果 padding-top:100%,那容器本身就別設定高度。一旦設定高度,padding-top還是能切割出等比例的高,但圖片在顯示時會被容器本身寫死的高度影響,導致圖片不會是1:1等比例的容器,而是長方形。
- object-fit在IE是不支援的,那在IE下會變成怎樣呢?不會怎樣,就是圖片形變而已(淚)。padding-top這個屬性倒是沒問題(測試環境:win7的IE11)。
- object-fit在IE的設定可以使用 background-size 進行設定,有興趣的同學可以自行上網搜尋。
Leave a Reply