https://muki.tw/css-img-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 一起做使用。

before( SEO ：搜尋引擎搜尋不到這張頭像)

<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( SEO ：搜尋引擎搜尋的到這張頭像)

<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 結構更加語意化

為何較不推薦用 background的CSS屬性？

如果要使用 background 嵌入圖片，我們會把圖片寫在 CSS 檔案裡，但搜尋引擎是以 HTML 為主要索引內容，不會去收錄 CSS 等樣式檔。