object-fit

2024-10-15

前端

能轻易做到别人感觉困难的事是人才;能轻易做到别人所不能做的工作是天才。——西德尼

讲一个小技巧,对于图片裁剪可以用这个属性:object-fit

object-fit 是一个 CSS 属性,用于指定替换元素(如 <img><video>)内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小,以及是否保持内容的比例

例如:

1
2
3
<div style="width: 400px; height: 400px; overflow: hidden;">
<img src="https://vampireachao.github.io/imgs/head.png" style="width: 100%; height: auto; object-fit: cover; object-position: 0px 0px;transform: scale(1.2);">
</div>