什麼是 object-fit

object-fit 是一個 CSS 屬性，用於決定一個可替換 resource 的 element（img, video, iframe...）如何適應定義好寬高的 HTML 標籤。

object-fit 常用的屬性值

• contain: resource 在 element 內保持寬高比
• cover: resource 填滿 element 並保持寬高比，超出的部分會被裁切
• none: resource 保持原有尺寸

Use Case

通常會搭配 object-position 一起做使用。

avatar

before

<div class="avatar" ></div>

div.avatar {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;

  background-image: url(img/avatar.jpg);
  background-size: cover;
  background-position: center;
}

after

<img class="avatar" src="img/avatar.jpg">

img.avatar {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;

  object-fit: cover;
  object-position: center;
}

使用 object-fit 和 object-position 的 avatar，HTML 結構更加語意化

參考資料

object-fit
Replaced elements
Create a circle avatar from a rectangle image keeping proportions and just using centre of image