初识CSS的object-view-box属性

Ahmad Shadeed--做了他一贯擅长的事情--提供了对object-view-box 属性的早期观察，他将其描述为一种在浏览器中用CSS裁剪图片的本地方式。

用例是什么？嗯，艾哈迈德不失时机地展示了如何使用该属性来完成过去需要(1)在图像周围使用隐藏溢出的包装元素，该元素的大小和位置在该元素内，或者(2)使用background-image 。

但是有了object-view-box ，我们基本上可以像使用SVG的viewbox一样，画出图像的边界。所以，拿一个普通的<img> ，然后调用object-view-box ，用一个inset 函数来修剪边缘。我将简单地把Ahmad的笔放在这里。

CodePen嵌入回退

恐怕目前只在Chrome Canary中支持。但它（目前）计划在Chrome 104中发布。在其他地方。

• 它在CSS图像4级规范中（编辑草案）。
• 火狐说这个属性值得做原型。
• Safari还没有信号。

转到共享链接-Permalink on CSS-Tricks

CSSobject-view-box属性初探最初发表于CSS-Tricks。你应该收到通讯。