img标签上的背景尺寸和背景位置

Question

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

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

问题-是否有一种方法可以做到，而无需将所有图像都切换<img>为<div>s，而s会将所有图像作为背景并且可以移动和缩放以显示裁剪的部分？是否可以保留<img>标签的这种样式或其他可能的解决方法？

Answer 1

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

Answer 2

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

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

• JCrop（jQuery 插件）
• ImageAreaSelect（jQuery 插件
• Uvumitools 作物（Mootools 插件）
• JS Cropper UI（基于 scriptacolous 和原型）