使用CSS / Javascript修剪图像空白？

Question

是否有人尝试使用CSS / JS删除图像的白色（未使用）部分？我有一个图像（http://i.imgur.com/oA5ezhv.jpg），其中包含许多空格所包围的实际内容，如果可能的话，我想使用纯CSS删除（可能是position:absolute; clip:rect(0px,60px,200px,0px);或background-size:cover;或组合），但遗憾的是不知道图像文件中实际内容的位置。期望的结果显示钱包本身。

我宁愿避免使用JS解决方案，但是如果有一些有效且相当高效的东西，那就太棒了！可以在PIL（Trim whitespace using PIL）中进行，但如果我们的前端解决方案能够在80％以上的时间内正常运行，那么可以避免它。

更新：以相对方式（百分比）巧妙猜测（或至少假设）背景位置或剪辑位置的最佳方法是什么？使用background-position，clip和background-size的组合来获得所需的效果会更好吗？

Answer 1

你可以使用背景位置，我为你做了这个

div {
  background: url('http://i.imgur.com/oA5ezhv.jpg') no-repeat;
  width: 230px;
  height: 160px;
  background-position: -35px -180px;
}

它创建一个大小为庄稼的空容器，然后根据主题的位置定位背景

Here is the example working

如果图像是动态的并且空白比例发生变化，那么你需要使用javascript或者在服务器端执行（gd或php中的imagemagick）