在调整窗口大小或旋转移动设备上标记 img 位置答案

【问题标题】：tag img position on resize window or rotate mobile device在调整窗口大小或旋转移动设备上标记 img 位置
【发布时间】：2017-01-20 12:12:37
【问题描述】：

如果窗口最大化或手机处于竖屏位置，放大镜的位置在你的位置（没关系）。

当我调整窗口大小或旋转手机时，放大镜的位置会移动。

我尝试将单位放在 px、em、vw、显示内联、flex、块或内联块等，相对位置等，但结果相同。

我该如何解决这个问题？

谢谢

PS。请原谅我的英语。

HTML：

...
<div id="input_search">
  <form method="post">
   <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Search..."></input>
  </form>
  <img id="lupa" src="img/lupa.png">
  <img id="back" src="img/back.png">
</div>
...

CSS：

#input_search input {
   background-color: #ffa366;
   color: black;
   padding: 15px 0px;
   float: left;
   border: 0px;
   font-size: 16px;
   margin: 1% 0px 1% 0px;
   width: 100%;}

.indent1 {
   text-indent: 17px;
}

.indent2 {
   text-indent: 57px;
}

#lupa {
   float: right;
   height:24px;
   margin-top: -11%;
   margin-right: 1%;
}

【问题讨论】：

标签： html css

【解决方案1】：

我假设您希望图像位于输入中？如果是这样，另一种选择是使用 background-image 属性。

参见下面的 sn-p。

*另外，我认为<input> 在 HTML5 中不需要结束标记

#input_search input {
  background-color: #ffa366;
  color: black;
  padding: 15px 0px;
  float: left;
  border: 0px;
  font-size: 16px;
  margin: 1% 0px 1% 0px;
  width: 100%;
}

#search {
  background-image: url('https://placehold.it/30x30');
  background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: right 7px bottom 7px;
}

<div id="input_search">
  <form method="post">
   <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Search...">
  </form>
</div>

CODEPEN

【讨论】：