div /边界不与img缩放

Question

我有一个带有偏移边框的图像。它可以完美地在移动设备上运行，但是一旦放大，div就会保持相同的高度，因此边框不会与图像保持一致。试图添加一个min（）到大小，但这并没有改变任何东西。我傻了吗多谢你们！请参阅下面的图像，以获取我想要的示例。

HTML：

<!-- profile picture -->[![enter image description here][1]][1]
<div class="profile">
  <div class="border"></div>
  <img src="{% static 'haloassets/images/PaulBG.jpg' %}" alt="" />
</div>

CSS / SCSS：

.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;
  }
}

Answer 1

.profile {
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
}
.border, img {
  position : absolute;
  left :0;
  top:0;
}
.border{
  outline: 4px solid red;
  outline-offset: 0px;
  margin: 15px -15px;
  width: 100%;
  height: 100%;
}

<div class="profile">
            
    <div class="border">

    </div>
    <img src="https://via.placeholder.com/300X200" alt="" />
</div>