如何获取图像的起点和终点，这样就会在图像上添加按钮

Question

我们在图像上添加了按钮，但加载的图像宽高比不是div容器的100％宽度。使用background size属性将图像作为容器中的纵横比加载。添加了go按钮图像，但是按钮左侧和顶部基于div容器，因此它看起来不太好。

我们正在使用angular指令来设置背景图像。

whereIn()

但客户希望根据图像动态按钮顶部和高度。 enter image description here

Answer 1

尝试将图像的父级设置为relative，将按钮设置为absolute。如下所示：

<div class="image-wrapper>
    <img src="url.jpg" />
    <button>Click me</button>
</div>

并且按钮应该是相对于图像包装的绝对按钮

.image-wrapper{
    position: relative;
}
.image-wrapper button{
    position: absolute;
    top: 10px;
    left: 10px;
}