基于窗口调整输入文本框的大小和位置答案

【问题标题】：Resize and reposition input text boxes based on windows基于窗口调整输入文本框的大小和位置
【发布时间】：2020-06-23 02:55:14
【问题描述】：

我正在尝试更改文本框的位置，以便如果窗口大小发生变化，输入框仍然在我拥有的图像中的正确位置。虽然我无法共享图像，但我将如何确保文本框相对于图像的位置保持不变？我在某个图像上放置了 100 个文本框。包括我现在拥有的。我从绝对像素定位开始，这显然行不通。非常感谢！如果您需要更多信息，请写下回复，我可以添加更多详细信息。

<!DOCTYPE html>
<html>
<head>
    <title>Worksheet</title>
    <style type="text/css">

        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }

    body {
      background-image: url(A.png);
      background-repeat: no-repeat;;
    }

    input {
      background-color: #fff000
    }
    </style>
  <script type="text/javascript">
    
    function createXTextBoxes(parent, count, ycor, xchange, yessir) {
        var xcor = 0
        for (var i= 0; i < count; ++i) {
          var input = document.createElement("input");
          input.type = "text";
          input.setAttribute("value", yessir);
          input.setAttribute("size", "2");
          input.setAttribute("style","position:absolute ;left:"+(27+xcor)+"%;top:"+ycor+"%");
          input.setAttribute("class","YEET")
          parent.appendChild(input);
          xcor += xchange
      }
    }

    function createAllTextBoxes(parent){
      console.log('Creating text boxes')
      var ychange = 0;
      for (var i=0;i<2;++i){
        createXTextBoxes(parent,13, 30+ychange,3.67,"");
        ychange+=10;
      }
      ychange = 4
      for (var i=0;i<7;++i){
        createXTextBoxes(parent,10, 90+ychange,2,"");
        ychange+=10;
      }
      for (var i=0;i<1;++i){
        createXTextBoxes(parent,4, 90+ychange,2,"");
        ychange+=10;
      }
    }
  </script>
    
</head>
<body onload>
<!--    <img src="A.png" class = "center"> -->
    <form id="main">
    <!--input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:389px'>
    <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:446px'>
    <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:503px'-->
    <input id="clickMe" type="button" value="clickme" onclick="checkAnswers();" />
    <p id="demo"></p>

</body>
<script type="text/javascript">
  var answerkey = [0,1,2,3,4,5,6,7,8,9,10,11,12,
  12,11,10,9,8,7,6,5,4,3,2,1,0,
  5,2,9,6,3,11,4,9,6,12,
  0,1,7,0,1,9,4,5,1,11,
  11,3,8,4,6,12,3,2,10,8,
  0,8,5,7,1,2,5,8,0,7,
  10,7,2,9,12,6,8,1,11,4,
  9,12,4,0,11,3,1,10,2,12,
  6,2,3,8,5,7,12,4,9,6,
  7,5,10,3]
  // answerkey = answerkey.map(String)
  var form = document.getElementById("main");
  createAllTextBoxes(form);

  function checkAnswers(){
    var totalcorrect = 0
    var elements = document.getElementsByClassName("YEET")
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].value != "") {
        if(elements[i].value ==  answerkey[i]){
          // console.log(elements[i].value)
          totalcorrect += 1
        }
    }
      // console.log(elements[i])
      // console.log(answerkey[i])
    }
    console.log(totalcorrect)
    document.getElementById("demo").innerHTML = totalcorrect;
  }

</script>

</html>

【问题讨论】：

标签： javascript html css input

【解决方案1】：

您可以为背景图片尝试这种风格。

body {     
    background: url(A.png) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;      
}

【讨论】：

虽然输入还是可以滚动的，但是图片本身不行，只有在窗口很小的时候才能看到整个图片。
可能不是保持图像作为背景，你可以保持原样。您已注释掉的代码。将 z-index 设为 1。文本框 (id=demo) 的 z-index 可能为 100。然后它将叠加在图像上。您将需要稍微调整 css 以获得准确的结果。我没有尝试过，所以这只是一个建议。