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. Вы можете удалить цвет фона и добавить свои URL-адреса.

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

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; 
}