title: Image with zoomed in border
body: <p>I have a grid with lots of images with a mock-up html like the below:</p>
  
  <pre><code>&lt;div style="width: 200px;"&gt;
    &lt;img src="image.jpg" style="width: auto;" /&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>The problem is, the container div has a fixed width, and the width of the images differ between them, so I'm ending up with some containers with a white "padding" in the left and right sides of their inner image, because their inner image don't fit exactly the container width. I would like to make something similar to the image below, which is, when the image don't fit the width, I show a zoomed border in both sides. </p>
  
  <p><a href="https://i.stack.imgur.com/HdlGr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HdlGr.jpg" alt="Image with zoomed border"></a></p>