有谁知道如何使用 CSS 和 HTML 创建这样的图像容器

Question

Image

大家好，我想包含像上图这样的图像。我很确定我应该将图像包含在div 容器中，但我不知道如何设置容器和图像的样式。除此之外，边框在重叠时具有不同的颜色。非常感谢任何形式的帮助。谢谢你，对不起我的英语不好。

基本上这是我编写的代码，但我认为这不是正确的方法：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 350px;
  max-width: 800px;
  border: 1px solid gray;
  left: 16px;
  top: 16px;
}
.dimg {
  max-width: 110%;
  max-height: 110%;
  position: absolute;
  left: -16px;
  top: -16px;
}

<div class="container">
  <img class="dimg" src="http://static.wixstatic.com/media/fc350e_e38e21e547204e4b83ff18afcab7f300.jpg">
  <div class="caption">
  </div>
</div>

Answer 1

这应该是一个很好的起点：

.container {
  position: relative;
  width: auto;
  max-height: 350px;
  max-width: 800px;
  border: 2px solid gray;
  display: flex;
  height:160px;
  
}
.img-container {
flex:1;
  position: relative;
  left: -16px;
  top: -16px;
  height: calc(100% + 32px);
  overflow:hidden;
}
.caption{
flex:1;
}
.dimg {
  max-width: 110%;
  position: relative;
width:100%;
  
}
.border2 {
  border: 2px solid white;
  height:160px;
  width:100%;
  position: absolute;
  top: 16px;
  left: 16px;
}

<div class="container">
<div class="img-container">
  <img class="dimg" src="http://static.wixstatic.com/media/fc350e_e38e21e547204e4b83ff18afcab7f300.jpg">
 <div class="border2"></div>
 </div>
  <div class="caption">
  </div>
</div>