在图像中安装图像

Question

使用CSS，有没有办法适合这个图像： 在此手机图像内（仅限手机边框）：

将其设置为背景图片将占用完整矩形，但不适合手机边框但更多。

这就是代码的样子

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

Answer 1

修剪手机图像周围多余的空白会有很大帮助，因此您不需要四处寻找定位。此外，图片和手机框架的尺寸/宽高比不一样，因此您需要使用背景尺寸/位置进行游戏，以获得您想要的方式。但您真正需要做的就是设置border-radius以匹配手机图像。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;