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

【问题标题】：Trim Image Whitespace Using CSS/Javascript?使用 CSS/Javascript 修剪图像空白？
【发布时间】：2014-08-31 05:10:55
【问题描述】：

有没有人尝试过使用 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的组合来获得想要的效果更好吗？

【问题讨论】：

标签： javascript image css

【解决方案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）

【讨论】：

关于动态大小的好编辑，我只是想指出这一点:)
感谢您的回答，点赞！有哪些方法可以将 JS 用于未知空白比例的图像？我还想知道是否可以使用带百分比而不是像素的 CSS 背景位置？如果只依赖前端，就能得到一个在大多数情况下都能正常工作的解决方案，那真是太棒了。
是的，百分比也是可能的，据我所知，大多数单位，对于 javascript 部分检查这个问题stackoverflow.com/questions/12175991/…
顺便说一句，应该避免这样的空白，因为它确实会增加文件大小（以及在移动设备上的渲染时间）。但是，我假设在这种情况下它是不可避免的......