缩小时在屏幕上调整图像

Question

在“图像”区域中进行缩放时，不在屏幕上。我希望它保持在原位

<img style="margin-bottom:-10px;width:280px;height:280px;border-adius:50%
;border:3px solid white" id="image" src="@Model.Image" /> <br />

<a id="editbutton" href="#"><i style="border:3px solid white;border-radius:80%;
 padding:12px;z-index:5000;background-color:#128edb;font-size:15px;margin-left:40%;margin-top:-200px;color:white;" class="fa fa-pencil"></i></a>                  

enter image description here

Answer 1

您需要在 css 和 html 中进行一些更改。请检查以下代码段。

您可以通过更改right元素中的bottom和#editbutton值来调整编辑图标的位置。

.imgWrap{position:relative;width:280px;height:280px;}
#editbutton{position:absolute;right:-20px;bottom:-20px}

<div class="imgWrap">
<img style="margin-bottom:-10px;width:280px;height:280px;border-adius:50%
;border:3px solid white" id="image" src="@Model.Image" /> <br />

<a id="editbutton" href="#"><i style="border:3px solid white;border-radius:80%;
 padding:12px;background-color:#128edb;font-size:15px;color:white;" class="fa fa-pencil"></i></a>
 <div>

它将为您提供帮助。 ：）