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

Question

图片

嗨，大家好，我想包含上面的图片。 我非常确定我应该将图像包含在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>