物件填滿方式與定位

對於「可置換物件」( 例如圖片、影片 ) 而言，除了遮罩和裁切可以改變顯示範圍，也可以透過 object-fit 和 object-position 等樣式屬性設定填滿適應方式和定位，這篇教學會介紹這些樣式屬性的用法，以及透過這兩個樣式實作 sprite 圖片效果。

快速導覽：

object-fit 物件填滿適應

object-position 物件定位

運用 object-position 實作 sprite 圖片效果

CSS 教學 - 物件填滿方式與定位

object-fit 物件填滿方式

object-fit 表示「物件填滿方式」的樣式屬性，沒有繼承特性，這個樣式主要針對「可置換物件」，也就是更換的 src 屬性就能更換內容的元素，例如圖片 img、影片 video 或頁框 iframe 都屬於可置換元素，在指定可置換元素的尺寸後，可進一步利用 object-fit 樣式屬性，設定動態放入內容的填滿方式。

屬性值	說明
fill	長寬填滿元素，可能發生變形 ( 預設值 )。
contain	完整顯示物件內容，可能會被裁切。
cover	物件符合元素最大邊長，可能會顯示元素本身背景。
none	維持原本物件長寬，可能會被裁切。
scale-down	如果物件長寬都小於元素長寬則 none，否則是 fill。

下方範例會先將 <img> 元素的寬高設定為 80px 和 300px，接著觀察不同 object-fit 屬性值所呈現的不同效果，例如設定 fill 會讓物件寬高符合元素寬高，就發生變形現象，設定 contain 的物件會發生裁切，設定 cover 為了顯示完整物件，會露出不合比例而多出來的元素背景，設定 none 則會保持原本物件尺寸而發生裁切，scale-down 在這個範例中因為物件尺寸大於元素，會使用 none 呈現。

線上展示：https://codepen.io/oxxo/pen/xxvvVob

<!-- HTML 程式碼-->
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<br>
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">

<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 10px 40px 10px 10px;
  }
  img:not(:nth-of-type(1)){
    width: 80px;
    height: 320px;
  }
  img:nth-of-type(2) {object-fit: fill;}
  img:nth-of-type(3) {object-fit: cover;}
  img:nth-of-type(4) {object-fit: contain;}
  img:nth-of-type(5) {object-fit: none;}
  img:nth-of-type(6) {object-fit: scale-down;}
</style>

CSS 教學 - 物件填滿方式與定位 - object-fit 物件填滿方式

下方範例會呈現 scale-down 在不同元素大小中的效果，如果物件尺寸大於元素就等同 contain，如果物件尺寸小於元素就等同 none。

線上展示：https://codepen.io/oxxo/pen/dyxxMBX

<!-- HTML 程式碼-->
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
<br>
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">


<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 20px;
  }
  img:nth-of-type(1) {
  width: 50px;
  height: 300px;
    object-fit: contain;
  }
  img:nth-of-type(2) {
  width: 50px;
  height: 300px;
    object-fit: scale-down;
  }
  img:nth-of-type(3) {
    width: 300px;
    height: 300px;
    object-fit: none;
  }
  img:nth-of-type(4) {
    width: 300px;
    height: 300px;
    object-fit: scale-down;
  }
</style>

CSS 教學 - 物件填滿方式與定位 - object-fit 的 scale-down 表現方式

object-position 物件定位

object-position 可以定義「物件在元素中的位置」，使用方式和 mask-position 完全相同，沒有繼承特性，使用「對齊關鍵字」或「位置偏移量」來定義物件的位置，可以將關鍵字與偏移量互相搭配，產生「1～4」個屬性值，下列方列出相關撰寫語法：

對齊關鍵字

單純使用位置名稱進行對齊，這個寫法會有「1～2」個屬性值，使用後表示會將物件的邊緣或中心點貼齊指定位置，注意，不能同時使用「top 與 bottom」或「left 與 right」。

關鍵字	等同屬性值	說明
top	`center top`	靠上對齊
right	`right center`	靠右對齊
bottom	`center bottom`	靠下對齊
left	`left center`	靠左對齊
center	`center center`	置中對齊
left top	-	靠左上對齊 ( 預設值 )
left bottom	-	靠左下對齊
right top	-	靠右上對齊
right bottom	-	靠右下對齊

位置偏移量 ( 百分比 )

使用百分比單位，在沒有設定對齊關鍵字的狀態下，採用「left top」的方式進行偏移，並按照「百分比公式」計算偏移量，由於最終偏移結果是按照公式計算出的數值，如果物件尺寸大於元素尺寸，計算後會往反向移動 ( 類似設定負值的 px )，如果物件尺寸小於元素尺寸，計算後會順向移動，這個寫法會有「1～2」個屬性值。
```
( 元素寬度 - 物件寬度 ) * x 偏移百分比 = x 方向偏移量
( 元素高度 - 物件高度 ) * y 偏移百分比 = y 方向偏移量
```
屬性值等同屬性值 ( top left ) 說明

50% 50% 50% 左往右偏移 50%，上往下偏移 50%

50% 100% - 左往右偏移 50%，上往下偏移 100%
位置偏移量 ( px、em、rem )

使用非百分比的長度單位，在沒有設定對齊關鍵字的狀態下，採用「left top」的方式進行偏移，px 表示像素，em 表示元素本身字型大小，rem 表示根元素字型大小，設定負值會往反方向移動，這個寫法會有「1～2」個屬性值。

屬性值等同屬性值 ( top left ) 說明

50px 50px 50px 左往右偏移 50px，上往下偏移 50px

50px 100px - 左往右偏移 50px，上往下偏移 100px
混合對齊關鍵字與位置偏移量

將「對齊關鍵字」和「位置偏移量」組合，就能指定「哪個方向的偏移量」，這個寫法會有「4」個屬性值，注意，不支援使用 center 位置關鍵字。

屬性值等同屬性值說明

right 20% bottom 20% -20% -20% 右往左偏移 20%，下往上偏移 20%

left 20% top 20% 20% 20% 右往左偏移 20%，上往下偏移 20%

屬性值	等同屬性值 ( top left )	說明
`50%`	`50% 50%`	左往右偏移 50%，上往下偏移 50%
`50% 100%`	-	左往右偏移 50%，上往下偏移 100%

屬性值	等同屬性值 ( top left )	說明
`50px`	`50px 50px`	左往右偏移 50px，上往下偏移 50px
`50px 100px`	-	左往右偏移 50px，上往下偏移 100px

屬性值	等同屬性值	說明
`right 20% bottom 20%`	-20% -20%	右往左偏移 20%，下往上偏移 20%
`left 20% top 20%`	20% 20%	右往左偏移 20%，上往下偏移 20%

下列範例會讓不同的 div 呈現不同的 object-position 效果。

線上展示：https://codepen.io/oxxo/pen/GRVVZbE

<!-- HTML 程式碼-->
object-position: center;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: center top;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: right bottom;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: 50px 50px;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: left 50px top 50px;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: right 50px bottom 50px;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">

<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 10px  0 20px 0;
    width: 200px;
    height: 200px;
    display: block;
    object-fit: none;
  }
  img:nth-of-type(1) {object-position: center;}
  img:nth-of-type(2) {object-position: center top;}
  img:nth-of-type(3) {object-position: right bottom;}
  img:nth-of-type(4) {object-position: 50px 50px;}
  img:nth-of-type(5) {object-position: left 50px top 50px;}
  img:nth-of-type(6) {object-position: right 50px bottom 50px;}
</style>

CSS 教學 - 物件填滿方式與定位 - object-position 物件定位

運用 object-position 實作 sprite 圖片效果

所謂的「sprite 圖片」，是將「分別顯示的多張圖片整合為一張圖片」，並運用「定位」的方式設定該圖片的位置，這種方式可以減少網站啟動時圖片傳輸的請求 ( request )，讓原本要載入多次不同的圖片，變成只載入一張圖片即可，進而提升網站效能，通常在網站中實作 sprite 圖片，都會使用 background-image 和 background-position 互相搭配，但透過 object-position，也可以在不額外撰寫其他元素的狀態下，單純運用 <img> 元素實現 sprite 圖片效果。

下方範例會使用一張九宮格圖片，讓九張圖片分別呈現不同的數字。

線上展示：https://codepen.io/oxxo/pen/bGXXpPv

<!-- HTML 程式碼-->
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">


<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 5px;
    width: 100px;
    height: 100px;
    object-fit: none;
  }
  img:nth-of-type(1) {object-position: top left;}
  img:nth-of-type(2) {object-position: top center;}
  img:nth-of-type(3) {object-position: top right;}
  img:nth-of-type(4) {object-position: center left;}
  img:nth-of-type(5) {object-position: center;}
  img:nth-of-type(6) {object-position: center right;}
  img:nth-of-type(7) {object-position: bottom left;}
  img:nth-of-type(8) {object-position: bottom center;}
  img:nth-of-type(9) {object-position: bottom right;}
</style>

CSS 教學 - 物件填滿方式與定位 - 運用 object-position 實作 sprite 圖片效果

小結

object-fit 和 object-position 是一個比較新穎的 CSS 樣式屬性，透過「可置換元素」的「物件」和「元素」特性，就能在不需要額外元素的狀態下，實現 sprite 圖片的效果，是相當方便的功能。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

物件填滿方式與定位

object-fit 物件填滿方式

object-position 物件定位

運用 object-position 實作 sprite 圖片效果

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩