How can I make the entire html page with images and write self-adaptable to my the dimension-CodePudding

I have the following code with the following Image. I would like to make the entire page self-adaptable to the dimension of the browser page. If I am not mistaken I should add a meta tag int he "head" section

<!DOCTYPE HTML>
<html land=en">
<head>
    <style>
 #DivIm {
        position: absolute;
        left: 905px;
        top: 900px;
        width: 400px;
        height: 125px;
        margin: 10px;
        border: 5px solid black;
        background-color: white;
      }
      #getData {
        width: 250px;
        height: 200px;
        border: 5px solid #4f4d4d;
        left: 400px;
        top: 500px;
      }

    </style>
</head>


<body data-new-gr-c-s-check-loaded="8.898.0" data-gr-ext-installed="">
    <h3>Drag the GeekforGeeks image into the rectangle:</h3>
    <div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="centering" src="Immagine.png" draggable="true" ondragstart="drag(event)" width="100" height="100"/>

    <div id="DivIm" ondrop="drop(event)" ondragover="allowDrop(event)">    </div>
    <img id = "DivImage1" src="Immagine.png" draggable="true" ondragstart="drag(event)" style="position: absolute; margin-left: 20.6%" width="100" height="100"/>


<script>
function allowDrop(ev) {
        ev.preventDefault();
      }

function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }


function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var data2 = data.substring(0, 5);

        if (ev.target.id == data2){
            alert("Sono uguali")
            ev.target.appendChild(document.getElementById(data));
            document.getElementById(data).style.margin = 0   "px";
         }
        else {
            alert("Wrong Box")
            }

}

</script>
</body>

</html>

Someone has any clue of what I should modify inside the style part or in the head?

CodePudding user response：

You can use % instead of px so you can preserve the same shape on all screens