html - 使用 object-fit 将 div 放在图像的顶部

Question

我想在这张图片(纸杯蛋糕)上放置一个 div。

例如，我想把我的div放在红樱桃上面，像这样

因为我的图像具有动态宽度和高度，并且我在我的 css 中使用了 object-fit: cover;， 所以当我的图像调整大小时，div 位置必须相应地移动。

如果我的图像具有固定尺寸，使用 position: absolute; 即可。但是，在我的图像中使用 object-fit: cover; 时，我的图像会随着用户调整大小而四处移动。调整大小时如何使我的 div 出现在准确位置？

谢谢。如果我的问题很乱，你无法理解，请告诉我，因为我的母语不是英语。

Answer 1

试试这个，要获得 div 的准确顶部和中心定位，您可以使用 CSS calc() 函数。

#box{
  width:auto;
  height:auto;
  position:relative;
  overflow:hidden;
}
img{
  width:100%;
  min-height:100%;
  object-fit:cover;
}
#box > .bx{
  position:absolute;
  width:60px;
  height:60px;
  background:#111;
  top:5%;
  left:calc(100% - 60%);
  color:#fff;
}

<div id="box">
<div class="bx">Text</div>
<img src="http://i.stack.imgur.com/7Mj25.jpg">
</div>