html - img 标签上的背景大小和背景位置

Question

我有一张可以使用 JS 库裁剪的图像。该库返回所选内容的 x、y、宽度和高度。

最初，逻辑只是几个上传的图像(在 <img> 中)并排放置，上面有一些小的编辑按钮，可以打开一个带有裁剪逻辑的弹出窗口。但是，现在的规范是预览裁剪的内容。

问题 - 有没有办法在不切换所有 <img> 的情况下做到这一点？至 <div>是否会将所有图像作为背景并且可以移动和缩放以显示裁剪部分？是否有这种样式的对应物或其他可能的解决方法，我可以在其中保留 <img>标签？

Answer 1

如果你不关心 IE，你可以使用 object-fit 和 object-position:

img {
   object-fit: cover;
   object-position: center top;
}