如何解决如何减小与输入场集成的图像的尺寸和位置?
那是因为图像的大小,所以我怎样才能将输入字段放在按钮的中间,并减小它的大小,以便根据上述图像获得输出?
代码在这里:
<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标签上使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。