html - 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 样式。您可以删除背景颜色并添加图片网址。

div.image {
    position: relative;
}
img#profile {
    width: 250px;
    height: 250px;
    background: blue;
    border-radius: 50%;
    z-index: 100;
    left: 10px;
    top: 10px;
    position: absolute;
}
img#frame {
    width: 270px;
    height: 270px;
    background: tomato;
    border-radius: 50%;
    z-index: -1;
}

JSFIDDLE