如何将两张图片组合在一起？

Question

我想要将两个图片组合在一起，这样在缩小时它们不会分离。

所以我想要实现的效果就像下面这张图片。

我尝试了下面的代码，它确实可以正常工作，但是当我试图缩放页面时，两个图片会分离，所以我想要像在MS Word中单击图片时，有一个名为“组合”的选项将两个图片组合在一起。

我在这个链接中使用了代码，但缩放时两个图片会分离。

否则，如果您有更好的方法来实现，请给出建议。

.partners-images-1 {
  width: 8%;
  height: 8%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at calc(100px) calc(100px), transparent 20px, yellow 5px);
}

.partner1-logo-music {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  fill: yellow;
}

<div class="partners-images-cut-out-frame">
  <img src="~/Content/images/partner1.jpg" class="partners-images-1" />
  <div class="frame-image-partner-1">
    <img src="~/Content/images/music.svg" class="partner1-logo-music" />
  </div>
</div>

- Chloe

Answer 1

<!-- Try this code. You can change  .partners-images-cut-out-frame height and width to view the changes. or else you can zoom and check.

工作示例 - https://www.kingsubash.com/sample-code/08062020-1 -->

<!-- CSS CODE -->
.partners-images-cut-out-frame{height:350px;width:350px;} // Just change the height and width and enjoy. Both Outer image and edit icon will be in in a group
.partners-images-1 {    
  width: 15%;
  height: 15%;
  border-radius: 50%;
  position: relative;
  left: 80%;
  bottom: 27%;
}


.partner1-logo-music {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: green;
  fill: yellow;
}


<!-- HTML CODE -->
<div class="partners-images-cut-out-frame">
  <img src="https://www.kingsubash.com/assets/img/king-subash.jpg" class="partner1-logo-music" /><!-- PROFILE ICON -->
  <img src="https://www.kingsubash.com/assets/img/kingsubash-line-art-sm.jpeg" class="partners-images-1" /> <!-- EDIT ICON -->
</div>

- Subash Chandra

---

@K Subash Chandra 感谢Loosie94，我正在测试您的代码。实际上，我也在这里创建了一个新问题（https://stackoverflow.com/questions/62281217/when-zooming-in-html-element-get-misplaced），如果您能帮忙，请回答。 - Chloe

Answer 2

我认为你不需要为图像使用剪辑掩码？ 我用音乐图标外面的边框做了同样的事情。 即使你放大，它也能很好地工作。这是代码和fiddle：

HTML：

<div class="partners-images-cut-out-frame">
   <img src="https://placeimg.com/300/300/any" class="partners-images-1" />
  <div class="frame-image-partner-1">
    <img src="https://placeimg.com/80/80/any" class="partner1-logo-music" />
  </div>
</div>

CSS：

.partners-images-cut-out-frame {
  width: 150px;
  height: 150px;
  position: relative;
}

.partners-images-1 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.partner1-logo-music {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0.3125rem solid white;
  position: absolute;
  bottom: -0.3125rem; /* - border radius size */
  right: -0.3125rem; /* - border radius size */
}

还有 JSFiddle: https://jsfiddle.net/Loosies/jvuhw52z/

- Loosie94

---

谢谢Loosie94，我正在测试您的代码。实际上，我还在这里创建了一个新问题链接，请帮忙解答。 - Chloe

实际上，我的图像是SVG格式的，而不是JPG或PNG。因此，我像使用其他任何图像一样使用它，使用<img>标签，并且很难创建一个圆角边框，这就是为什么我使用<div>作为框架的原因。 - Chloe