图像上的输入文本框

Question

如何将文本框放置在图像上，并锚定文本框固定在图像上。

当我调整尺寸时，图像锚定丢失。

文本框应与图像成比例缩放

body, html {
    width: 100%;
    height: 100%;
  }


/* Container holding the image and the text */
.bg_img {
    /* Control the height of the image */
   height: 1500px;  
   background-repeat: no-repeat;   
   position: relative;
  }  

.innerContainer {
    position: absolute;
    left: 20px; 
    width: 100%;  
    height: 100%;
}

/* Full-width input fields */
input[type=text], input[type=password] {    
    position: absolute;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

<div class="myContainer">
        <div class="bg_img" style="background-image: url(img/Aufm.jpg)">        
            <div class="innerContainer">
                <input type="text" placeholder="h" name="l1" style="left: 20px; top: 320px; width: 80px; transform: rotate(90deg);">
                <input type="text" placeholder="b" name="l1" style="left: 20px; top: 220px; width: 80px; transform: rotate(90deg);">
                <input type="text" placeholder="h2" name="l1" style="left: 300px; top: 320px; width: 80px;">
            </div>        
          </div>
      </div>

图像大小不同。

Answer 1

您的内联样式具有左右像素，这就是为什么它使您可以尝试使用px的％实例的滚动条的原因。希望您能解决您的问题，如果不让我知道详细信息