為替換元素設定樣式

使用 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="驕傲旗" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="驕傲旗" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="驕傲旗" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="驕傲旗" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="驕傲旗" />
<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="驕傲旗" />
<p>
  <label><input type="checkbox" /> 變更尺寸</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;
}

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) {
  /* 沒有 object-fit 屬性 */
  outline: 2px dashed red;
}

勾選核取方塊以設定高度和寬度值。請注意，只有 fill 值（預設值）會扭曲原始圖片。對於所有其他值，圖片的固有長寬比都會被保留。

object-position 屬性

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

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

img {
  object-position: bottom right;
}

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

它可以在沒有 object-fit 的情況下使用。在這種情況下，圖片會以其固有尺寸（218px x 218px）算繪，圖片內容的位置由 object-position 值設定。

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

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

object-position 屬性對 <iframe>、<video> 和 <embed> 元素的作用與對 <img> 的作用一樣好。

參見

• 理解長寬比
• CSS 圖片模組
• CSS display 模組
• CSS 背景與邊框 模組