1. Web
  2. CSS
  3. object-fit

object-fit

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

object-fit CSS 屬性用於指定可替換元素（如 <img> 或 <video>）的內容應該如何調整大小以適應其容器。

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

你可以使用 object-position 屬性來更改可替換元素內容物件在其元素框內的對齊方式。

試一試

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

語法

css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

object-fit 屬性指定為從以下值列表中選擇的單個關鍵字。

值

contain

可替換內容按比例縮放，以保持其寬高比，同時適應元素的 content box。整個物件將填充盒子，同時保持其寬高比，因此如果物件的寬高比與盒子的寬高比不匹配，物件將被 “信箱” 或 “柱箱” 填充。

cover

可替換內容按比例縮放，以保持其寬高比，同時填充元素的整個 content box。如果物件的寬高比與盒子的寬高比不匹配，則物件將被裁剪以適應。

fill

可替換內容調整大小以填充元素的 content box。整個物件將完全填充盒子。如果物件的寬高比與盒子的寬高比不匹配，則物件將被拉伸以適應。

none

可替換內容不進行大小調整。

scale-down

內容的尺寸將按照指定 none 或 contain 的方式進行調整，以較小的具體物件尺寸為準。

正式定義

初始值fill
應用於可替換元素
繼承性否
計算值同指定值
動畫型別離散

正式語法

object-fit = 
  fill                               |
  none                               |
  [ contain | cover ] || scale-down

示例

為影像設定 object-fit

HTML

html
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>

CSS

css
h2 {
  font-family: "Courier New", monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

結果

規範

規範
CSS 影像模組第三級
# the-object-fit

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題
© . Content available under a Creative Commons license.