CSS：在所有屏幕尺寸上完美覆盖两个图像

Question

我有两张照片。一个是具有圆形边缘的图片，另一个是圆形框架的图片。我想将框架放在图片上，使其看起来像是单个图像。 我正在努力与CSS做这件事，因为在不同的屏幕尺寸上，它不会保持不变。

这是我的HTML：

<div class="image">
    <img src="picture.png" id="profile"/>
    <img src="frame.png" id="frame"/>
</div>

我的CSS：

div.image   {position: relative;}

img#profile {width: 250px;
            border-radius: 50%}

img#frame   {width: 250px;
            position: absolute;
            z-index: 100;}

我希望结果看起来像这样（蓝色是图片#profile，橙色是图片#frame：

此外，无论屏幕大小如何，都需要保持这种状态，因此使用left值并不起作用。

使用上述标记，图像正在执行此操作：

我该如何解决这个问题？

Answer 1

你没有提供任何照片。所以，我使用了CSS样式。您可以删除背景颜色并添加图片网址。

using (var originalEnumerator = originalShapesListID.GetEnumerator())
  foreach (var editShape in editedShapesListID)
  {
    if (!originalEnumerator.MoveNext()) break;
    var original = originalEnumerator.Current;

    ...
  }

<强> JSFIDDLE

Answer 2

每当你改变大小时，你都需要自己修复它。

div.image {
position: fixed;
margin: 100px;
}
img#profile {
width: 250px;
height: 250px;
background: skyblue;
border-radius: 100%;
z-index: 100;
position: absolute;

}
img#frame {
width: 270px;
height: 270px;
background: orange;
border-radius: 100%;
z-index: -1;
position: absolute;
top:-10px;
left:-10px;
}