title: CSS Crop image and set bounding box accordingly
body: <p>I am trying to crop images in CSS but can't get it work as I wish. Here are three pictures to understand my problem :</p>
  <p>The following screenshot represent what the &quot;uncropped&quot; elements look like.</p>
  <p><a href="https://i.stack.imgur.com/SROvzm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SROvzm.jpg" alt="uncropped image" /></a></p>
  <p>For exemple, let's say I only want to keep the part of the first image going from 20% of its height to 60% of its height.</p>
  <p>I tried to apply the following CSS to my red rectangle :</p>
  <pre><code>clip-path: polygon(0% 20%, 100% 20%, 100% 60%, 0% 60%); 
  </code></pre>
  <p>And the result is</p>
  <p><a href="https://i.stack.imgur.com/guaMmm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/guaMmm.jpg" alt="badly cropped image" /></a></p>
  <p>Which is not good because there is still some blank space around the first image (the gray background was added for better visualization.)</p>
  <p>The result I am trying to achieve is this</p>
  <p><a href="https://i.stack.imgur.com/GPQoqm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GPQoqm.jpg" alt="nicely cropped image" /></a></p>
  <p>I got that by hardcoding values but this won't be possible.</p>
  <p>Is this achievable with CSS only, and knowing the width and height of the original image ?</p>