如何获取图像的起点和终点，因此将在图像上添加按钮答案

【问题标题】：How to get the image start and end point, so will add button on image如何获取图像的起点和终点，因此将在图像上添加按钮
【发布时间】：2017-08-09 19:41:22
【问题描述】：

我们正在图像上添加按钮，但图像加载为纵横比而不是 div 容器的 100% 宽度。使用背景大小属性将图像加载为容器中的纵横比。添加了 go 按钮图像，但按钮左侧和顶部基于 div 容器，因此看起来不太好。

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

.go-button {
  position: absolute;
  top: 4.6rem;
  margin-left: -3rem;
 }

.project {
 flex-grow: 1;
 max-width: 30rem;
 background-size: auto 16.9rem;
 background-repeat: no-repeat;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 align-items: flex-end;
 background-position: center;
 justify-content: center;
 position: relative;
}

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

【问题讨论】：

完成！。在我的例子中，我们使用指令获取图像是垂直或水平的，使用图像对象并传递了 src。如果图像大小是垂直的，则使用一个 css 类，否则水平创建新的 css 类并应用。根据图像大小，css 类只有顶部和左侧。

标签： javascript html css image

【解决方案1】：

尝试将图像的父级设置为相对，将按钮设置为绝对。如下：

<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;
}

【讨论】：