Question

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

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

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

Answer 1

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

Answer 2

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

使用哪个元素并不重要，它可以是任何元素（参见w3.org/TR/CSS2/colors.html），包含following example中显示的img标记：

<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

没有一种简单的方法。如果包含下面一个答案的链接，则表示同意。您可以使用javscript将部分图像渲染到画布，然后使用我在下面（Canvas Approach）下发布的答案将结果图像设置为图像标记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?

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

3 个答案: