如何使用 object-fit 将图像叠加在另一个图像的角落

【问题标题】：How to super position an image in the corner of another one with object-fit如何使用 object-fit 将图像叠加在另一个图像的角落
【发布时间】：2019-11-28 01:33:22
【问题描述】：

我有一个具有固定高度和宽度的图像渲染器，它显示具有各种纵横比的图像，我想保留这些纵横比。

到目前为止，它已使用此代码

  object-fit: contain;
  object-position: center;
  height: 100%;
  width: 100%;

现在我想在图像的右下角放置一个图标。我不能做一个固定的位置，因为object-fit 使并非所有图像都具有相同的宽度。

【问题讨论】：

你能分享一些你的html吗？你只使用标签吗？

标签： html css sass

【解决方案1】：

这应该设置您想要的方式。请注意，我必须使用包含 div 并使其显示：flex。

div {
  border: 1px solid blue;
  position: relative;
  display: flex;
}
.main {
  object-fit: contain;
  object-position: center;
  position: relative;
  height: 100%;
  width: 100%;
}
.icon {
  position: absolute;
  bottom: 0%;
  right: 0%;
}

<div>
  <img class="main" src="https://placekitten.com/300/300" />
  <img class="icon" src="https://placekitten.com/50/50" />
</div>

【讨论】：

这适用于正方形或横向图像。如果您有许多宽度可变的图像或垂直照片怎么办？