title: div / border not scaling with img
body: <p>I have an image with an offset border. It works perfectly on mobile, but once scaled up, the div stays the same height, and so the border does not stay with the image. Tried to add a min() to the size but that didn't change anything. I'm being dumb? Thanks guys! See image below for an example of what I want.</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- profile picture --&gt;[![enter image description here][1]][1]
  &lt;div class=&quot;profile&quot;&gt;
    &lt;div class=&quot;border&quot;&gt;&lt;/div&gt;
    &lt;img src=&quot;{% static 'haloassets/images/PaulBG.jpg' %}&quot; alt=&quot;&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS/SCSS:</p>
  <pre class="lang-css prettyprint-override"><code>.profile {
    width: 85vw;
    height: 21vh;
    float: right;
    transform: translateX(2rem);
    position: relative;
    img {
      width: 100%;
      height: auto;
      position: absolute;
    }
    .border {
      width: 100%;
      height: 100%;
      position: absolute;
      border: 4px solid $primary;
      top: 10px;
      left: -10px;
      z-index: -1;
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/8jZdm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8jZdm.png" alt="enter image description here" /></a></p>