object-fit

什麽是 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