标记在调整大小窗口上的位置或旋转移动设备 [英] tag img position on resize window or rotate mobile device

问题描述

如果窗口最大化或手机处于纵向位置，则放大镜的位置在您的位置（可以）。

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

我试图把单位px，em，vw，显示内联，flex，块，等等，但相同的结果。

我如何解决这个问题？

/ p>

PS。请原谅我的英语。

HTML：

  ... 
< div id =input_search> 
< form method =post> 
< input type =textname =searchid =searchmaxlenght =50value =placeholder =Search ...>< / input& 
< / form> 
< img id =lupasrc =img / lupa.png> 
< img id =backsrc =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％; 
} 
  

解决方案

图像位于输入内？如果是，一个替代选项是使用 background-image 属性。

请参阅下面的代码段。 >

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

  #input_search input {background-color：＃ffa366;颜色：黑色; 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-position：right 7px bottom 7px;}  

  div id =input_search> < form method =post> < input type =textname =searchid =searchmaxlenght =50value =placeholder =Search ...> < / form>< / div>  

CODEPEN

If window is maximised or the phone is in portrait position, the position of magnifying glass is in your place (it's ok).

When I resize the window or when I rotate the mobile phone, then position of magnifying glass move.

I tried to put units in px, em, vw, display inline, flex, block or inline-block etc, position relative etc but the same result.

How can I fix this?

Thank you

PS. Please excuse my English.

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%;
}

解决方案

I'm assuming you want the image positioned inside the input? If so, an alternative option is to use the background-image property.

See snippet below.

*also, I think <input> does not need a closing tag in 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

这篇关于标记在调整大小窗口上的位置或旋转移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！