css - 如何为未知尺寸的图像添加偏移边框？

我正在尝试设计这种效果：



如何使用CSS进行这项工作？图片大小未知，我希望绿色框与图片大小相同，但偏移吗？

除了使用javascript调整绿框大小外，我无法获得任何解决方案，但我认为必须有CSS解决方案？

谢谢！

最佳答案

您可以使用伪类来做到这一点：

.imgContainer{
  position:relative;
  display:inline-block;
}
.imgContainer:before{
  content:'';
  border:1px solid green;
  position:absolute;
  width:100%;
  height:100%;
  top:10%;
  left:10%;
  z-index:-1;
}

<div class="imgContainer">
  <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM">
</div>