введите текстовые поля над изображением

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

ваш встроенный стиль имеет левый и правый пиксель, поэтому он создает полосу прокрутки, которую вы можете попробовать использовать% instance of px. надеюсь, что вы решите свою проблему, если не сообщите мне детали