使用单位移动图像内容

Question

假设我的图像尺寸为 960x960，但img元素的高度为 720px。

<img class="imgs" src="~/test.jpg" />

styles for .imgs

.imgs {
    width: 100%;
    height: 45rem;
    object-fit: cover;
}

现在我可以使用object-position来设置 position top/bot 或其他，但我可以使用一些单位移动这个 img 吗？ 我将尝试使用绘画来解释这一点（对不起我的绘画技巧）：

图例：黑线-div，红线-img

当我使用object-posotion: top时，它看起来像：

obj-pos-bot

使用object-position: bottom时：

对象后置顶

现在我想如何移动它：

结果

所以我想要object-position: top ，但还要将图像内容向上移动一点（几个像素）。 我尝试过使用边距和填充，但它不仅移动了整个元素，还移动了内容

Answer 1

如果我正确理解您的问题，您希望在元素框中对齐图像内容。 您实际上可以使用object-position来实现这一点。

只需使用您要使用的单位，而不是top, bottom, etc.等值； 例如：

object-position: 50% 10px;

第一个值设置水平 position，第二个值设置垂直 position。