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

Question

我想要一个按钮重叠在响应式网站的输入字段上，就像这样：

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

这是因为图像的大小，所以我如何将输入字段放在按钮中间并减小它的大小以获得如上图所示的输出？

代码在这里：

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

Answer 1

在 img 标签上使用 position:absolute 并通过添加 top: 50% 和 transform: translateY(-50%)

垂直居中

 .input-group-image {
    z-index: 4
}

.input-group-image img {
    position: absolute;
    z-index: 1;
    height: 60px;
    top: 50%; /* moves 50% from top */
    transform: translateY(-50%); /* to vertically center the image */
}

.input-group .input-group-control {
    padding-left: 70px; /* to add space between image and input box  */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="input-group ">
   <span class="input-group-prepend input-group-image">
     <img src="https://i.stack.imgur.com/3TS5W.png">
   </span>
   <input type="text" size="1" class="form-control input-group-control" placeholder="REC" />
 </div>

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

how to reduce the size of and locatin of image integrated with input field?

css

html5-canvas

responsive-design

bootstrap-4