基于 windows 调整输入文本框的大小和位置

Question

I am trying to change where text boxes are, so that if the windows size changes, the input boxes are still in the right place in the image I have.我正在尝试更改文本框的位置，以便如果 windows 大小发生变化，输入框仍然在我拥有的图像中的正确位置。 While I cannot share the image, how would I go about making sure that the location of the text boxes relative to the image stays the same?虽然我无法共享图像，但我将如何确保文本框相对于图像的位置保持不变？ I have 100 textboxes placed on a certain image.我在某个图像上放置了 100 个文本框。 Including what I have right now.包括我现在拥有的。 I started with absolute pixel positioning, which obviously does not work.我从绝对像素定位开始，这显然行不通。 Thanks so much, If you need more information.非常感谢，如果您需要更多信息。 write a reply and I can add more details.写一个回复，我可以添加更多细节。

<!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>

Answer 1

You can try this style for your background image.您可以为背景图片尝试这种风格。

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

基于 windows 调整输入文本框的大小和位置

问题描述

1 个解决方案

解决方案1
0 2020-06-23 09:01:49

基于 windows 调整输入文本框的大小和位置

问题描述

1 个解决方案

解决方案1 0 2020-06-23 09:01:49

解决方案1
0 2020-06-23 09:01:49