title: Trim Image Whitespace Using CSS/Javascript?
body: <p>Has anyone experimented with removing the white (un-used) part of the image using CSS/JS? I have an image (<a href="https://i.imgur.com/oA5ezhv.jpg" rel="nofollow noreferrer">http://i.imgur.com/oA5ezhv.jpg</a>) that contains actual content surrounded by lots of whitespace that I want to remove using pure CSS if possible (perhaps <code>position:absolute; clip:rect(0px,60px,200px,0px);</code> or <code>background-size:cover;</code> or a combination), but unfortunately the location of the actual content in the image file is not known. The desired results is showing the wallet by itself. </p>
  
  <p>I would much rather avoid a JS solution but if there's something that works and fairly performant, it will be awesome! It's possible to do in <code>PIL</code> (<a href="https://stackoverflow.com/questions/10615901/trim-whitespace-using-pil">Trim whitespace using PIL</a>), but it would nice to avoid it if we have a frontend solution that works well 80%+ of the times.</p>
  
  <p><img src="https://i.stack.imgur.com/tn4hv.jpg" alt="image with white space"> </p>
  
  <p><strong>Update:</strong> what's the best way to smartly guess (or at least assume) the background position or clip location in a relative way (percentages)? Is it better to use a combination of <code>background-position</code>, <code>clip</code>, and <code>background-size</code> to get the desired effect?</p>