iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 11

[Day 11] 阿嬤都看得懂的基礎 CSS 樣式-圖片篇

阿嬤都看得懂的基礎 CSS 樣式-圖片篇

昨天我們發現在使用區塊元素呈現圖片時,無法顯示完整的圖片。我們的原圖長這樣:

結果卻只顯示了左上 小角:

會有這個結果,是因為圖片本身是有自己的寬高的。圖片的寬高未必都會和區塊的寬高符合,像上面這張圖片原本的尺寸比較大,所以上面那個 200 X 200 的區塊,就只能顯示出圖片的左上角。因此,這時候,我們就必須決定背景圖片和區塊怎麼配合;這個配合的屬性,叫作

  • 背景尺寸:background-size。值可能是數字加上長度單位,但是我們比較常用的是兩個文字,cover 表示讓圖片自動覆蓋滿整個區塊contain 則是讓整個圖片在區塊中完整顯示

不過,我們可以想像,使用 contain 的時候,既然圖片尺寸和區塊尺寸不合,又需要讓圖片完整顯示,這時候就會出現圖片並未蓋滿區塊的狀況。那麼,這個沒被蓋滿的區塊,就會是白邊對嗎?讓我們來試試看加上 background-size: contain 看看吧!

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain;"></div>

結果還是和預期中不一樣啊!

該死的瀏覽器會自動重複圖片,把區塊蓋滿了。這不是我們期待的結果,所以我們必須設定背景重複:

  • 背景重複:background-repeat,可以指定重複的方式,例如水平重複 repeat-x 或垂直重複 repeat-y。不過很多時候,我們需要的是不重複 no-repeat
    那就讓我們加上 background-repeat: no-repeat 看看吧!
<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: contain; background-repeat: no-repeat;"></div>

終於,出現的圖片比較接近預期的狀況了!

另外,既然使用 cover 的時候,圖片自動覆蓋滿整個區塊,就會有超出區塊不被看見的圖片部分。這時候,圖片的位置就變得非常重要,因為這會決定圖片那些地方被裁切掉。例如,上面這張圖片改為 background-size: cover 後

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: cover;"></div>

,看起來的樣子會是:

雖然不太明顯,不過圖片只顯示出最左邊的風景。

因此,我們必須設定背景位置:

  • 背景位置:background-position,可以是數字加上長度單位,會把圖片的左上邊框放在距離區塊左上邊框那個長度的位置,當然也可以分開寫定 2 個數值,就會分別對應左邊框與上邊框的距離。也可以在長度數值前面加上方位,指定該方位的邊框距離。不過,比較常用的或許是 center 這個值,會把圖片與區塊的中心疊合在一起。

讓我們把上面那個區塊,設定 background-position: center 看看

<div style="background-image: url(https://i.imgur.com/4ndjo3V.png); height: 200px; width: 200px; background-size: cover; background-position: center;"></div>

果然,我們看見的就是中心的風景囉!

接著,我們要介紹一個超級重要的屬性,這個屬性是每個標籤都可以設定的。還記得昨天提到的元件推擠嗎?p 標籤對應的原件,自然會把其他元件往上下推擠出去,但是 strong 標籤不會。因此,我們是否有個屬性,決定元件的上下推擠方式呢?

當然有,不過這個屬性的名稱很奇怪,叫作

  • 展示樣貌:display。值是文字,通常會用到的 4 種。分別是
    • block,會和其他元素產生上下推擠,可以設定寬高。div, p, h1 都是預設 display: block。
    • inline,不會和其他元素產生上下推擠,但是無法設定寬高。假使想設定高度,必須使用 line-height進行設定。例如前面我們用了 4 個區塊,來展現 position 的作用,其中文字能夠在區塊中垂直置中,就是因為設定了 line-height 和區塊的 height 相同。strong, span 都是預設 display: inline。
      那麼,假使我希望我的元素不會產生上下推擠,又可以設定寬高,該怎麼辦呢?我們可以設定 display 的值為
    • inline-block,不會和其他元素產生上下推擠,又可以設定寬高。值得注意的是,img 標籤是預設 display: inline-block,而非與 div 相同是 block 喔!

前面我們用了 4 個區塊,來展現 position 的作用。這 4 個區塊之所以會垂直排列,就是因為 div 預設 display: block。那麼,假使我們想把這 4 個區塊橫向排列,該怎麼辦呢?沒錯,就是設定 display: inline-block 就可以囉:

	<div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">區塊一</div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px; display: inline-block;">區塊二</div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">區塊三</div>
	  	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px; display: inline-block;">區塊四</div>
	</div>

我們就會得到:

最後,既然我們說過 CSS 樣式千奇百怪,與其餵各位阿嬤吃魚,不如教各位阿嬤怎麼釣魚!

工程師們在遇見問題的時候怎麼辦呢?上課?念書?太慢了吧!當然是 google 啊!不過,我們也是必須掌握查詢相關知識的鑰匙 (key),也就是關鍵字 (key word)!繁體中文資源最齊全的,應該就是鐵人賽囉!因此,遇到任何想知道的技術,可以先搜尋那個技術的名稱加上「鐵人賽」。如果你阿嬤對於閱讀比較抽象的文字還算擅長,也可以搜尋技術名稱加上 "MDN",不過有些頁面會是全英文喔!另外,W3Schools 這個網站上也有許多教學,部分也有簡體中文化,也可以上去看看。最後,假使遇到問題比較細,並非某個技術,就可以查 StackOverflow 這個網站,上面說不定已經有人,問過我們遇到的問題囉!

那麼,今天就差不多把基礎的 CSS 樣式都走過一次,期待明天再見囉!


上一篇
[Day 10] 阿嬤都看得懂的基礎 CSS 樣式-區塊篇
下一篇
[Day 12] 阿嬤都看得懂的 CSS 收整與 DRY 策略
系列文
你阿嬤成為網頁前端工程師的第一步30

1 則留言

0

可以教阿嬤做隨螢幕等比例縮放的圖片嗎~

這個問題比較複雜,可以參考這篇文章喔!

我要留言

立即登入留言