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

【问题标题】：Background-size and background-position on an img tagimg 标签上的背景大小和背景位置
【发布时间】：2015-03-05 14:45:36
【问题描述】：

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

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

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

【问题讨论】：

如何预览裁剪的内容？裁剪后的项目会显示在另一张图片的某个位置吗？
@SpencerWieczorek 假设有一个 300 像素 x 500 像素的图像。用户需要位于中心的 50px 50px 部分。他选择了它，我将这个 50px-50px 的部分（如果需要，可以拉伸它）放入原始图像容器中，这样用户就可以确定只使用了图像的这一部分。
画布可能是您的最佳选择。

标签： html image css

【解决方案1】：

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

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
好的。我已经删除了链接。两行代码胜过很多话。
仅供参考 - No IE support at all.
救命恩人...非常感谢

【解决方案2】：

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

不管你使用哪个元素，它可以是任何元素（见w3.org/TR/CSS2/colors.html），包括一个img标签，如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 库/插件，而不是自己编写一些东西。有很多解决方案：

【讨论】：

不是确切的解决方案，但我从中学到了一些东西。最终重新编写并向图像添加了额外的 div。如果图像显示错误，我会在所有图像上放置事件，因此当我删除“src”时会显示错误并且我不想覆盖它。

【解决方案3】：

没有简单的方法。如果包含指向下面同意的一个答案的链接。您可以使用 javscript 将图像的一部分渲染到画布上，然后使用我在下面（画布方法）下发布的答案将生成的图像设置为图像标签 src 属性。

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

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

【讨论】：