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

Question

我有一张可以使用 JS 库裁剪的图像。 lib returns x,y, width and height 选区。

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

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

Answer 1

没有简单的方法。如果在下面的一个答案中包含 link，则表示同意。您可以使用 javscript 将部分图像呈现为 canvas，然后使用我在下面的 (Canvas 方法) 下发布的答案将生成的图像设置到图像标签 src 属性中。

一致回答： Offset viewable image in <img> tags the same way as for background-image

Canvas 方法： Can I get image from canvas element and use it in img src tag?

Answer 2

实现此目的的最佳方法是将任何 html 元素与 css 背景属性结合使用。在该属性中，您可以将边距定义为定位和调整背景图像大小的大小。在您的情况下，该元素将具有裁剪库给定的宽度和高度。背景图像的位置将是 x 和 y（也来自库），但颠倒了。

使用哪个元素并不重要，它可以是任何元素（参见 w3.org/TR/CSS2/colors.html), included an img tag as shown in the following example:

<img border="0" style="display:block; width:120px; height:120px; background-color:red; padding:9px; background:url(http://www2.cnrs.fr/sites/communique/image/mona_unvarnish_web_image.jpg) no-repeat; background-position:-100px -40px;" />

请注意，如果您使用图片标签，则必须删除 src 属性（例如 JavaScript）。否则背景图片将不可见。

尽管如此，我还是建议您使用 JavaScript 库/插件，而不是自己编写一些东西。有一堆解决方案：

Answer 3

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

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

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

Background-size and background-position on an img tag

html

css

image