Question

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

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

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

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

Answer 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>

如何通过对象拟合将图像超级放置在另一个图像的角落

1 个答案: