為替換元素新增樣式

有些 CSS 屬性適用於所有元素，有些僅適用於網格和彈性容器，還有些僅適用於可變形元素。本指南將介紹僅適用於可替換元素的屬性。

可替換元素是其表現形式超出 CSS 範圍的元素；它們是外部物件，其表現形式獨立於 CSS 格式化模型。某些可替換元素，例如 <iframe> 元素，可能擁有自己的樣式表，但它們不會繼承父文件的樣式。

將 CSS 與可替換元素配合使用

在某些情況下，CSS 會特別處理可替換元素，例如在計算外邊距和一些 auto 值時。只有可替換元素才能擁有固有尺寸。某些可替換元素（但不是全部）具有固有尺寸或定義的基線，CSS 屬性（例如 vertical-align）會使用這些尺寸或基線。

儘管文件樣式可以設定可替換元素的大小和位置，但文件樣式不影響可替換元素的內容，但也有一些例外：CSS 影像模組包含支援控制元素內容在其框內定位的屬性。

控制內容框中物件的位置

CSS 影像模組定義了兩個屬性，可用於指定可替換元素中包含的物件應如何在其元素框區域內定位。object-fit 屬性用於調整物件大小，而 object-position 屬性用於定位物件。

`object-fit` 屬性

object-fit 屬性指定可替換元素的內容物件應如何適應包含元素的框。該屬性定義影像、影片和其他可嵌入媒體格式如何響應可替換元素內容框的高度和寬度。如果元素的高度、寬度或寬高比與將佔用為該元素保留空間的資源不同，fill、contain、cover、scale-down 和 none 值定義瀏覽器應縮放資源、覆蓋分配的空間、將資產包含在空間內，還是允許資源變形。

當內容被包含或縮小後，框中未被可替換元素覆蓋的任何區域將顯示元素的背景。

object-fit 屬性對 <iframe>、<embed> 和 <fencedframe> 元素沒有影響。

如果我們將一張寬高比為 1:1 的正方形影像放入一個 100px x 300px（寬高比為 1:3）的框中，預設情況下，影像將填充該框並自身扭曲。我們可以使用 object-fit 屬性來定義當影像被強制放入不同大小和寬高比的框中時，它應該如何渲染。

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<p>
  <label><input type="checkbox" /> Change dimensions</label>
</p>

body {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
  grid-auto-flow: column;
  max-width: 98%;
  margin: 10px auto 0;
}
img {
  width: 100px;
  height: 300px;
  outline: 2px solid purple;
}
body:has(:checked) img {
  width: 300px;
  height: 100px;
}

css

img:nth-of-type(1) {
  object-fit: fill;
}
img:nth-of-type(2) {
  object-fit: cover;
}
img:nth-of-type(3) {
  object-fit: contain;
}
img:nth-of-type(4) {
  object-fit: scale-down;
}
img:nth-of-type(5) {
  object-fit: none;
}
img:nth-of-type(6) {
  /* no object-fit property */
  outline: 2px dashed red;
}

勾選此框可設定高度和寬度值。請注意，只有 fill 值（預設值）會扭曲原始影像。使用所有其他值時，影像的固有寬高比會保持不變。

`object-position` 屬性

object-position 屬性指定可替換元素內容物件在元素框內的對齊方式。

它通常與 object-fit 屬性結合使用，其值是 <position> 值，與 background-position 中使用的值型別相同。

css

img {
  object-position: bottom right;
}

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

它可以在不使用 object-fit 的情況下使用。在這種情況下，影像以其固有大小（218px x 218px）渲染，影像內容的位置由 object-position 值設定。

img {
  margin: 10px 0 0 10px;
}

css

img {
  outline: 2px solid;
  object-position: 114px 72px;
}

object-position 屬性與 <iframe>、<video> 和 <embed> 元素配合使用時與 <img> 元素同樣有效。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 2025 年 7 月 14 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題