Css 如何减小与输入字段集成的图像的大小和位置？

我希望在响应网站的输入字段上重叠一个按钮，如下所示：

为此，我使用了一个输入组插件，但结果如下：

这是因为图像的大小，那个么我怎样才能把输入字段放在按钮的中间，并减小它的大小，以获得如上图所示的输出

代码如下：

<div class="input-group ">
            <span class="input-group-addon">
                <img src="./images/record.png">
            </span>
            <input type="text" size="1" class="form-control" placeholder="REC" />
        </div>
        

---

使用img标签上的

位置：绝对位置

，并通过添加

顶部：50%

和

转换：translateY（-50%）

。输入组图像{
z指数：4
}
.输入组图像img{
位置：绝对位置；
z指数：1；
高度：60px；
顶部：50%；/*从顶部移动50%*/
transform:translateY（-50%）；/*将图像垂直居中*/
}
.输入组.输入组控件{
左填充：70px；/*在图像和输入框之间添加空格*/
}

我尝试过这样做，甚至我也减小了输入字段的大小，但当尝试在其他窗口大小（如phoneadd this）中打开它时，它被分隔开。输入组图像{z-index:4}。因为窗体控件在焦点状态时有z-index:3。它工作得很好，但您能解释一下这是怎么发生的，并且输入块大小没有减少一点吗