Разместить изображение внутри изображения

Question

Используя CSS, есть ли способ уместить это изображение: внутри этого изображения телефона (только граница телефона):

установка его в качестве фонового изображения займет полный прямоугольник , который не соответствует границе телефона, но более того.

так выглядит код

                <div class="leftPhone">
                     <img class="LRPhone" src="images/leftphone.svg" alt="">
                </div>

Answer 1

Очень помогло бы обрезать лишние пробелы вокруг изображения телефона, чтобы вам не приходилось возиться с позиционированием.Кроме того, соотношение размер / формат изображения и рамки телефона не одинаковы, поэтому вам нужно поэкспериментировать с размером / положением фона, чтобы получить его так, как вы хотите.Но все, что вам действительно нужно сделать, это установить радиус границы в соответствии с изображением телефона.

.leftPhone {
  background-image: url('https://i.stack.imgur.com/6XUJf.png');
  background-repeat: no-repeat;
  background-size: 150px 200px;
  background-position: -30px -20px;
  width: 88px;
  height: 175px;
  border-radius: 10px;
}

.leftPhone img {
  position: absolute;
  left: -48px;
  top: -5px;
}

<div class="leftPhone">
  <img class="LRPhone" src="https://i.stack.imgur.com/sYhYo.png" alt="">
</div>