把一个div放在图片的正上方，用对象合适的位置

我想把一个div放在这张图片的上面（一个蛋糕）。把一个div放在图片的正上方，用对象合适的位置

例如，我要穿上红樱桃上面有我的DIV，这样

因为我的形象有一个动态的宽度和高度，我在我的CSS使用object-fit: cover;，所以当我的图像调整大小时，div位置必须相应移动。

如果我的图像有固定的尺寸，使用position: absolute;将完成这项工作。但是，在我的图片中，object-fit: cover;，我的图像是goanna随用户调整大小而移动。如何让我的div在调整大小时出现在确切的位置？

谢谢。如果我的问题很混乱，而且你不明白，请让我知道，因为我不是以英语为母语的人。

来源

2016-09-14 Jeffrey C

你将不得不找出左侧和顶部为图像的百分比，并使用该 – Pete

试试这个，以获得div的准确顶部和中心位置，您可以使用CSScalc() function。

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

来源

2016-09-14 10:40:55 frnt

@Jeffrey c不接受或给予好评的解决方案，如果它为你工作。 – frnt

谢谢，我没有想到这种方法，我多么傻。 –

欢迎@JeffreyC :-) – frnt

你回答了你自己的问题。什么，你需要做的是：使用百分比值进行定位，例如：

.my_cover_div { 
    position: absolute; 
    left: 60%; 
    top: 5%; 
}

对于以精确的点为中心，this article可能是有用的。

来源

2016-09-14 10:23:46 skobaljic

把一个div放在图片的正上方，用对象合适的位置

回答

相关问题