object-fit 基礎解說
object-fit 是一個針對 替換元素(例如 <img> 圖片或 <video> 視訊)的 CSS 屬性,用來定義當內容物的寬高比例與其容器不一致時,應如何調整內容物的尺寸。換言之,它決定圖片或視訊如何適應容器。object-fit 的預設值是 fill,而不同取值會產生不同效果:
fill:填滿 – 預設值。將內容拉伸或壓縮以完全填滿容器,不保留原始長寬比。如果圖片本身的比例與容器不同,圖片會變形以塞滿空間,可能導致人物看起來瘦長或扭曲(通常我們不希望出現這種變形情況)。
contain:包含 – 圖片會按比例縮放,以完全適應容器 (保留原始長寬比)。整張圖片都能呈現,不會被裁切;如果容器的比例與圖片不同,可能在容器內出現上下或左右的空白區域(信箱或柱狀的留白)以維持圖片完整顯示。
cover:覆蓋 – 圖片會按比例放大,以覆蓋滿整個容器。容器將被圖片完全填滿,但若兩者比例不一致,圖片的部分區域會超出容器邊界而被裁剪掉。這個設定常用來製作裁切居中的背景效果,例如橫幅或頭像縮圖,使畫面沒有留白且充滿容器。
none:不縮放 – 圖片不進行縮放,保持原始尺寸。若圖片原始尺寸大於容器,則只會看到其部分(等同於讓圖片在容器內靠左上對齊且裁掉超出容器的部分);若原始尺寸小於容器,則會出現空白背景。這種情況下內容不會自適應容器大小。
scale-down:縮小 – 顧名思義,效果類似於在 none 和 contain 之間取其較小者。也就是說,圖片會被縮放為原始大小或容器適應大小中較小的那一個。如果圖片原始尺寸已經比容器小,則維持原尺寸(相當於 none);如果圖片太大,則縮小就緒以完全放入容器(相當於 contain)。這個值在一些需要自動判斷的場景下很實用。
以上所有模式中,contain 和 cover 會維持圖片的長寬比例,是我們最常用來避免圖片變形的選項;前者保證全圖可見(可能留白),後者保證容器填滿(可能裁切)。而 fill 可能導致變形,通常僅在特殊需求下使用。none 則在需要呈現原尺寸像素等級的圖片時才用得到。
上述圖片展示了對同一張圖片使用不同 object-fit 值時的效果比較:fill 將圖片強行拉伸變形以填滿容器;contain 在容器上下留有空白以顯示完整圖片;cover 則放大圖片填滿容器並裁掉多餘部分;而 none 保持圖片原尺寸,超出的部分被直接裁掉。透過觀察,你可以清楚地看到只有 cover 和 contain 有維持圖片比例、避免變形,同時各自權衡了「裁切」與「留白」的取捨。一般來說,object-fit: cover 是最常用於版面呈現的選項,因為它讓畫面充滿且具美感,而不會產生奇怪的變形。object-fit: contain 則適合用在商品照片或展示完整圖片的場合。
object-fit 實戰範例
理解 object-fit 的作用後,我們來看一個實際例子。假設我們在製作一個相簿縮圖網格,需要每一張縮略圖都是固定大小的方形。圖片本身可能有各種長寬比例(橫式、直式都有),我們希望縮圖不失真且充滿整個方框。透過 HTML 和 CSS,我們可以這樣做:
<div class="thumb"> <img src="https://picsum.photos/id/1025/800/1200" alt="相簿縮圖"> </div> <div class="thumb"> <img src="https://picsum.photos/id/1024/1200/800" alt="相簿縮圖"> </div> <div class="thumb"> <img src="https://picsum.photos/id/1011/1000/1500" alt="相簿縮圖"> </div>
.thumb {
width: 30%; /* 每個縮圖容器寬度為父元素的30%,可根據版型調整 */
aspect-ratio: 1 / 1; /* 強制容器為1:1的正方形比例 */
overflow: hidden; /* 隱藏超出容器範圍的圖像部分 */
float: left; /* 簡單將縮圖容器橫向排列(或可用 flex/grid 排版) */
margin: 0 1% 1% 0; /* 間距設定,讓縮圖之間有空隙 */
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover; /* 讓圖片填滿容器並裁剪,保持長寬比 */
object-position: center; /* 圖片置中裁切(預設即為50% 50%,此行可省略) */
}
上述程式碼中,每個 .thumb 容器都被設為寬度30%(三欄並列)且長寬比1:1的正方形。aspect-ratio: 1/1 讓容器的高度自動維持與寬度相同,即使寬度隨響應式布局改變,高度也會同步改變,始終保持正方形。容器內的 <img> 我們設定寬高皆為100%,使圖片大小跟容器吻合,再透過 object-fit: cover 讓圖片填滿容器並自動裁剪多餘部分。這樣,不論原圖是橫的還是直的,都能完美地填充在正方形框內,產生整齊的縮圖效果。object-position: center 則確保裁剪時以圖片中心對齊(你也可以改成 top、left 等調整焦點)。在響應式設計下,容器 .thumb 的寬度(30%)會隨頁面大小改變,但因為我們用了 aspect-ratio 和 object-fit,每張縮圖依然保持方形且圖片內容完好地呈現重點部分,不會失真走樣。這個技巧常用於 照片牆、作品集縮圖、頭像列表 等情境。
aspect-ratio 基礎解說
aspect-ratio 是 CSS 中較新的版面屬性,用來設定元素盒子的寬高比例(長寬比)。透過這個屬性,我們可以讓一個容器在瀏覽器中按照指定比例佔據空間,無需手動計算高度。例如,如果我們希望一個區塊始終保持 16:9 的矩形形狀,無論螢幕多寬,都可以使用 aspect-ratio: 16 / 9 來實現。
使用 aspect-ratio 有幾個重點須知:
指定的比例是以 寬度 / 高度 的形式給出。例如 aspect-ratio: 1/1 代表正方形,aspect-ratio: 16/9 代表橫向影片常用比例,aspect-ratio: 3/4 則是直向矩形。
至少有一個維度需為自動(auto)大小,aspect-ratio 才會生效。意思是,如果你同時對一個元素明確設定了固定的寬度和高度,那瀏覽器就不會套用 aspect-ratio (因為長寬都鎖死了,比例已無從介入)。在典型用法中,我們通常只設寬度,而讓高度由 aspect-ratio 推導;或反之亦可,但網頁布局中更常見的是先定寬度。像前面的例子中,.thumb 容器透過寬度30%決定了寬度,而高度透過 aspect-ratio: 1/1 由瀏覽器自動計算得出。這樣即使父元素或視窗大小改變,瀏覽器也會根據給定的比例重新計算元素高度,自動維持既定的長寬比。
aspect-ratio 不僅能用在圖片或影片上,也能用在任何區塊元素上,包括 <div> 等一般容器。過去我們為了做出一個定高比例的盒子,需要使用所謂的「padding 百分比小技巧」:例如為了做16:9的容器,我們可能寫 .box::before { content:""; display:block; padding-top:56.25%; } 來撐開高度,如今有了 aspect-ratio,這種繁瑣的技巧已經可以淘汰。使用 aspect-ratio 更直觀且語意清晰,也避免了日後維護時對魔術數字的困惑。
aspect-ratio 實務應用範例
aspect-ratio 的出現大大簡化了響應式排版中保留高度比例的需求。以下是幾種常見的應用場景:
影片或嵌入內容容器: 例如嵌入 YouTube 視訊時,我們希望播放器無論在桌機還是手機上都維持 16:9 的視窗比例。只要把外圍容器設定 aspect-ratio: 16/9; width: 100%;,就能在不同螢幕下得到一致比例的播放器框架,再將實際的 <iframe> 設定寬高 100% 撐滿容器即可。這有效避免內容載入前後高度變化造成的版面跳動(累積佈局偏移),提供更佳的使用者體驗。
佔位符圖片或載入中預留空間: 在圖片實際載入前,可用一個設定了 aspect-ratio 的空白容器來預留空間。例如相簿或商品列表在等待圖片載入時,先顯示灰色方塊不會閃動跳位,因為容器高度已固定比例。瀏覽器也已經開始利用圖片的內建長寬資訊(如 <img> 的 width 和 height 屬性或 CSS 的 aspect-ratio)來預留空間,避免載入時內容突然下推。
統一不同尺寸圖片的版面: 就像上面的縮圖牆案例,我們可以將各種橫豎圖片放進同樣比例的容器裡,靠 aspect-ratio 保持容器一致形狀,再配合 object-fit 讓圖片各自調整。同理,你也可以製作一組等高比例的卡片(cards),每張卡裡即使文字內容長短不同、圖片尺寸不同,因為設定了相同的 aspect-ratio,卡片的縮放行為在各種螢幕上一致,整體版面看起來就很整齊。
請注意,aspect-ratio 並非強制內容拉伸到該比例,而是在瀏覽器計算自動高度時提供一個參考比例。對 <img> 等替換元素來說,它本身有內建的固有比例(intrinsic aspect ratio),這通常由圖檔的像素寬高決定。如果我們不設寬高,瀏覽器會按原比例縮放圖片;但若我們利用 CSS 想讓圖片的顯示比例不同於原始比例,就一定需要搭配 object-fit 來處理,否則圖片會被扭曲。如下一節所述,aspect-ratio 更常用來設定容器形狀,而圖片本身依賴 object-fit 來決定填充方式。
綜合運用與排版技巧
綜合來看,object-fit 著重於內容如何在框內呈現(縮放或裁剪),aspect-ratio 則決定框的形狀。兩者常常可以配合使用,讓你的圖片排版如虎添翼:
相片裁切的祕密武器: 以前如果要讓圖片在固定尺寸框中裁切且不變形,我們可能會選擇把圖片作為 CSS background-image,然後用 background-size: cover 來實現。但現在,有了 object-fit: cover,我們可以直接使用 <img> 標籤。一方面保留了語意化及SEO(圖片的 alt 文字對無障礙和搜尋優化都有幫助),另一方面也更簡潔。你不需要再為每張圖片額外寫容器和背景樣式,只要一行 CSS 就能達成同樣的覆蓋裁切效果。
讓縮圖、頭像一視同仁: 很多網站會要求上傳的頭像或縮圖具有相同的尺寸比例(例如都是正方形),但使用者上傳的照片難免有各種尺寸。如果沒有妥善處理,會出現有人頭像被擠壓變形的窘況。藉由為頭像圖片添加固定大小的容器(可用 aspect-ratio: 1/1 做方形)並套用 object-fit: cover,可以自動裁剪超出的部分,確保頭像看起來不走樣且畫面滿框。另外,如果需要關注焦點(例如人臉不要被裁掉),可以再利用 object-position 調整圖片在框內的顯示位置,如 object-position: top center 把圖片頂端對齊,讓人像靠上顯示等等。
提升版面穩定性: 如前所述,結合 aspect-ratio 來預留空間,可以避免圖片或影片載入時導致的版面跳動。比方說,在沒有 aspect-ratio 以前,如果我們只知道要把圖片寬度設為100%來適應手機和桌機,那高度常常不知道該給什麼,只能靠內容自然撐開,導致圖片沒載入時容器高度為0,一旦載入就突然撐大,其他內容整個往下推。有了 aspect-ratio,我們可以明確告訴瀏覽器圖片高是寬的幾成,瀏覽器在排版時就會先預留那個高度空間,即使圖片還沒載入也不會讓下面文字亂跑。這對用戶體驗和視覺穩定度非常有幫助。
最後值得一提的是,雖然 object-fit 非常強大,但它僅適用於替換元素(例如 <img>, <video>)。如果我們遇到一些必須用 CSS 背景圖的情境(例如需要在同一元素裡疊加文字在圖片上),那就還是需要用 background-image 結合 background-size: cover/contain 來做。兩者的概念十分類似,只是應用場景不同:object-fit 直接作用於<img>等元素內容,而 background-size 則作用於元素的背景層。根據需求選擇合適的方法,可以達到最佳的開發效率與效能。
接下來,我們將以問答形式回答一些初學者常見的疑問,加深對這兩個屬性的理解。
常見問答
問:object-fit: cover 和 CSS background-size: cover 有什麼差別?我應該用哪一種?
答:它們的效果很相似,都是讓圖片充滿容器且保持比例、必要時裁切。但應用場景不同。object-fit 用於 <img> 或 <video> 標籤本身,讓元素內容縮放裁切;background-size: cover 則用於背景圖像。如果你的圖片是版面中的主要內容(例如文章中的插圖、相簿圖片),建議直接使用 <img> 搭配 object-fit,因為這樣保留了語意和可存取性(可以使用 alt 文字、搜尋引擎能索引)。而若圖片純粹是裝飾用途,或需要在同一元素上疊加其他內容(例如文字在背景圖上),那使用背景圖搭配 background-size 會比較合適。此外,background-size 提供的主要值只有 cover 和 contain(以及 auto),沒有像 object-fit 那樣的 fill、none 等選項,但大多數情況下cover/contain已足夠。總之,原則是:內容圖用 <img> + object-fit,裝飾圖用 background-image + background-size。
問:在響應式設計中使用 aspect-ratio 時,需要注意寬度和高度的單位嗎?例如容器寬度用百分比,aspect-ratio 還有用嗎?
答:可以的!aspect-ratio 本來就是為了相容彈性布局而設計的。你可以為元素設定一個百分比寬度(相對父元素),再設定一個長寬比,瀏覽器會以計算後的實際寬度來推算高度,確保比例正確。例如上面的範例中,.thumb 容器寬度設為父容器的30%,不同螢幕下寬度會變化,但因為設定了 aspect-ratio: 1/1,瀏覽器會時時計算出相應高度,始終保持正方形。所以 aspect-ratio 非常適合與百分比寬度或彈性網格 (flexbox, grid) 搭配使用。唯一要避免的是同時為元素設定明確的寬度和高度(不論px或%),那樣會讓 aspect-ratio 失效。如果需要兼容更舊的不支援 aspect-ratio 的瀏覽器,則可能還是要以百分比 padding 技巧作為後備方案,不過在 2025 年的現在,大部分現代瀏覽器都已支援 aspect-ratio,可以放心使用。
問:我給 <img> 直接設了 aspect-ratio,怎麼圖片反而被拉伸變形了?應該怎麼解決?
答:如果你發現圖片失去了原本的比例,那很可能是忘了搭配 object-fit。對 <img> 設定 aspect-ratio 相當於強制圖片容器(就是圖片自己)遵循某個比例來呈現。預設情況下,<img> 的 object-fit 是 fill,這會讓圖片強行填滿新比例的框架,也就是被拉伸或壓縮以符合你指定的寬高比。解決方法是將圖片的 object-fit 設為 contain 或 cover,以保留圖片本身的長寬比例。其中 object-fit: contain 會讓整張圖片都露出但可能出現留白,cover 則會裁切部分來鋪滿框。你可以依需求選擇。如果目的只是要圖片維持本身比例縮放,其實通常不需要給 <img> 加 aspect-ratio,只要讓寬或高自動就行了——瀏覽器會依圖片的原始比例進行縮放。aspect-ratio 更常見的用途是如上所述,用在 <div> 等容器上或改變元素本身預設比例,而非為了單純保持原比例(保持原比例瀏覽器已自動幫你做了)。所以記得:當為圖片指定一個與原圖不符的比例時,務必使用 object-fit 來決定顯示方式,避免不必要的變形。
希望以上解答澄清了這兩個屬性的常見疑惑。總而言之,object-fit 和 aspect-ratio 為我們提供了更優雅、方便的工具來應對圖片排版難題。善用 object-fit: cover 可以輕鬆實現各種自動裁切的圖片展示效果,而 aspect-ratio 則讓響應式佈局中的高度計算變得毫不費力。當你熟練掌握它們的特性並靈活運用,你會發現以前需要繁瑣技巧才能完成的版面需求,如今只需短短幾行CSS就能搞定。在追求網頁美觀與實用並重的道路上,這兩個現代技巧絕對是值得加入你的技能清單的好幫手!
