关于html：img标签上的背景尺寸和背景位置


Background-size and background-position on an img tag

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

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

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

相关讨论

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

1
2
3
4
img {
    object-fit: cover;
    object-position: center top;
}
相关讨论

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

不管使用哪个元素都可以，可以是任何元素(请参阅w3.org/TR/CSS2/colors.html)，其中包含img标签，如以下示例所示：

1
<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 Crop(Mootools插件)
  • JS Cropper UI(基于脚本和原型)
相关讨论

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

同意答案：
偏移标签中的可见图像与背景图像相同

画布方法：
我可以从canvas元素获取图像并在img src标签中使用它吗？