Sticking a div and scaling according to the browser window-CodePudding

I am learning the basics of web development. I would like to make the position of a div depend on the dimensions of the browser window. I would also like this div to scale.

The easiest way to demonstrate this would be with images (it's all about the 'radio panel'): Intended appearance Scaled down the browser window The code I have written so far:

'panel' is the object I want to manipulate. HTML:

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
    <div id="panel">  
    </div>
</div>
</body>
</html>

CSS:

#main{
    background-image: url('tlo.jpg');
    background-size:cover;
    background-position:center;
    width:100%;
    height:100%
}

#panel{
    background-image: url('radio.png');
    position:relative;
    width: 49.7%;
    height: 30vh;
    /*border: 5px solid red;  */
    top:35.1%;
    left:23.9%;

}

Panel with red border should fit in the green border I've tried to find solutions on the Internet, but I don't even know quite how I'm supposed to describe it in a specialized way.

CodePudding user response：

You could try this: (put it in head)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And if it will not work as you expected it to work, then you can read something about media queries.

CodePudding user response：

Change the height of the #main div to 100vh.

#main{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/1200px-Zinnia_elegans_with_Bombus_01.JPG?20070924151254');
    background-size:cover;
    background-position:center;
    width:100%;
    height:100vh;
}

#panel{
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Halictus_bee_on_flower-2.jpg/1200px-Halictus_bee_on_flower-2.jpg?20070515152433');
    position:relative;
    width: 49.7%;
    height: 30vh;
    /*border: 5px solid red;  */
    top:35.1%;
    left:23.9%;

}

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
    <div id="panel">  
    </div>
</div>
</body>
</html>