css-featured-image

保持正圓或正方形的圖片

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

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

成果就像這樣:

css-circle-image
[圖一]object-fit範例動圖
有沒有覺得很神奇阿(被毆

1.先看看範例的程式

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

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

範例的程式如下:

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

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

  • object-fit:cover
  • 因為使用外容器,圖片的寬與高須強制設定為100%
  • .circle-spacer絕對必須存在的屬性:padding-top: 100%
  • position的設定

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

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

2.程式重點說明

2.1.object-fit

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

css-caniuse-object-fit
[圖二]object-fit在各大瀏覽器的支援度,IE悲劇
網頁版:http://caniuse.com/#search=object-fit

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

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

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

效果就會像這樣:

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

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

object-fit-example2
[圖四]object-fit範例二
為了讓容器明顯點,某貓多加了一圈紅色邊線。兩種效果差別很多吧,特別在圖片與容器的比例想差極多時(正方形容器與長方形圖片),那個效果相差更大。

2.2.padding-top: 100%

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

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

2.3.圖片的 position: absolute

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

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

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

3.注意事項

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.