Sammie's Blog

CSS | 可能是圖片不爆版的小秘密

不小心變成一年分享一主題(^_^;)

前陣子因為專案切版常常會有需要呈現圖片的區塊，就回去小翻了上課時老師教的方法，到底怎麼做才可以減少爆版機會呢?

覺得這個方法真心好用，我自己也有筆記下來，推薦給大家參考~

CSS 屬性

position

以下使用「TRBLZ」代替落落長的屬性們：top、right、bottom、left、z-index

value description
static(default) 當元素設定為static時，不管怎麼設定TRBLZ都沒意義
relative 當元素設定為relative時，代表元素要放的位置與預設的不同，而不同的程度會再依據設定TRBLZ而定
absolute 當元素設定為absolute時，瀏覽器會往該元素的外層找是否有其他position非預設值的元素(如果沒有，就會以網頁頁面<body>左上角為定位點)，並根據外層元素的位置再根據TRBLZ改變
fixed 當元素設定為fixed時，除了放置位置TRBLZ可設定外，當網頁卷軸滾動時，該元素的位置不會改變
sticky 當元素設定為sticky時，在沒有遇到可滾動的父層元素時，效果就和relative一樣；但碰到可滾動的副層元素時，會有類似absolute浮在最上層的效果

可以參考 position | w3schools 的範例看畫面比較清楚

fixed 跟 sticky 的實際應用可以看 蝦皮購物 的上方導覽列以及每日新發現那一排區塊(沒有業配，我也是查了好幾個電商才找到XD)

object

object-fit

value description
fill(default) 填滿容器，如長或寬的長度不足時，會將圖片比例破壞並延長到將整個容器填滿(如windows桌布「延展」的效果)
contain 根據圖片較長邊對應容器的比例，等比例縮放將整張圖片完整呈現於容器中(如windows桌布「全螢幕」的效果)
cover 維持圖片比例，並以類似裁剪的方式將容器填滿(如windows桌布「填滿」的效果)
none 不調整圖片大小
scale-down 圖片尺寸會和none或contain其中一個相同，並依據哪一個的結果圖片會比較小來決定

還有其實每個CSS屬性都會有的共通值(Global Values)：inherit、initial、unset

inherit 繼承父層元素屬性
initial 根據瀏覽器預設值而定
unset 實際呈現為inherit或initial其中一個，如果父層有設定就是inherit，反之則為initial

可以參考 object-fit | MDN 的範例看畫面比較清楚

object-position

可以直接看 object-position | MDN 的範例畫面比較清楚

使用方法

馬上精隨就來了~ 我們用外層包內層的方式來限制內層的圖片大小不爆版!!!

<!-- html -->
<figure class="myWrapper">
  <img src="" class="myImage">
</figure>

/* CSS */
figure.myWrapper {
  position: relative;
  width: 500px; /* 外層控制寬度大小 */
  height: 500px; /* 外層控制高度大小 */
  border: 2px solid #ccc; /* 方便參考外框大小，不需要就拿掉 */
}

img.myImage {
  position: absolute;
  width: 100%; /* 適應外層寬度 */
  height: 100%; /* 適應外層高度 */
  object-fit: cover; /* 填滿外層給的寬高 */
  object-position: center; /* 調整圖片根據外層置中對齊 */
}

根據以上邏輯來拼到其他 DOM 中，內外層的 position 通常會固定這樣寫不會改變

實際會長這樣 帕恰狗範例<3

練習題

  1. 製作一張包含 250px*250px 圖片的人物介紹小卡，如果沒想法的話可以從 這裡 開始
  2. 試著和 Bootstrap 4 的 Grid System 合用，製作出像 KKBOX歌曲排行榜 的呈現方式，專輯封面高度不小於80px

先不要看答案哈!! 自己做看看才有感覺~

我自己刻出來大概會長這樣，不過每個人的可能或多或少有一點不同

  1. 加上 CSS 後應該會長 這樣
  2. KKBOX實際刻出來大約會像 這樣 的感覺

學習資源