新提案，了解CSS的Object-View-Box属性

在开发过程中，我一直想要一种原生CSS方式来裁剪图像并将它们定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和各种CSS属性来实现，稍后解释。在本文中，我将带您了解JakeArchibald在今年年初提出的新CSS属性object-view-box。它允许我们裁剪或调整替换的HTML元素的大小，如或

）。添加position:relative和overflow:hidden添加position:absolute到图像，并调整定位和大小值以实现此结果。

图{位置：相对；宽度：300px；纵横比：1；溢出：隐藏；border-radius:15px;}img{position:absolute;左：-23%；顶部：0；右：0；底部：0；宽度：180%；高度：100%；object-fit:cover;}putimageasbackground在此解决方案中，我们使用

将图像设置为背景，然后更改位置和大小值。

.brownies{width:300px;宽高比：3/2；背景图像：url（“布朗尼.jpg”）；背景大小：700px自动；背景位置：77%68%；background-repeat:no-repeat;}这很好，但是如果我们想将上面的内容应用到呢？嗯，这就是object-view-box的用途。引入Object-View-Box属性object-view-box可能在Chrome104中得到支持。现在在Chromecanary中可用。根据CSS规范。object-view-box属性指定元素上的“视图框”，类似于属性，用于缩放或平移元素的内容。该属性的值为=|<矩形()>|。在本文的演示中，我将重点介绍inset()的用法。我们回到这个问题。有了object-view-box，我们可以使用inset从四个边（上、右、下、左）画一个矩形，然后应用object-fit:cover来避免变形。img{纵横比：1;宽度：300px；object-view-box:inset(25%20%15%0%);}这是怎么做到的？我们往下看。图像固有尺寸固有尺寸是默认的图像宽度和高度。我处理的图像尺寸是1194×1194px.img{aspect-ratio:1;width:300px;}使用上面的CSS，图像的渲染尺寸将为300×300px。我们的目标是在固有图像上绘制一个矩形。为此，我们使用inset()值。使用inset()值将基于原始图像的宽度和高度，从而产生裁剪图像。它将帮助我们绘制一个嵌入的矩形并控制四个边缘，类似于处理边距或填充。插入值定义插入矩形。我们可以像控制边距或填充一样控制四个边缘。在下面的示例中，卡片的所有边缘都有20px的内嵌。回到object-view-box:img{aspect-ratio:1;宽度：300px；object-view-box:inset(25%20%15%0%);}下面是上面内容的样子，值25%、20%、15%和0%的值代表top，分别为右、下、左。修复图像失真如果图像的尺寸是正方形，裁剪后的结果会失真。这可以使用object-fit属性来解决。img{宽高比：1;宽度：300px；对象视图框：插图（25%20%15%0%）；object-fit:cover;}放大或缩小我们可以使用inset来放大或缩小图像。从我的测试来看，过渡或动画不适用于对象视图框。我们还可以使用负插入值按比例缩小。想象一下，如果能够在不使用额外元素包装图像的情况下缩放图像，这将是多么有用。案例地址：https://codepen.io/shadeed/pen/yLvXJRd。期待这家新酒店的到来！