实现Div随浏览器窗口自适应定位与缩放的技术求助

要让id为panel的div精准适配背景图中的目标区域，并随窗口尺寸自适应调整，你可以通过以下步骤修改代码：

1. 确保容器占满整个视口 #

首先需要让html、body和#main都占满浏览器视口，否则后续的百分比定位和尺寸会失效：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main{
    background-image: url('tlo.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: relative; /* 作为panel的定位基准 */
    overflow: hidden;
}

2. 精准定位并自适应缩放Panel #

将panel改为绝对定位（相对于#main），用百分比设置位置和宽度，同时通过aspect-ratio维持与目标区域一致的宽高比，保证窗口缩放时比例不变：

#panel{
    background-image: url('radio.png');
    position: absolute;
    width: 49.7%; /* 匹配背景图中目标区域的宽度占比 */
    aspect-ratio: 1.657; /* 计算自：49.7%宽度 / 30%高度 ≈1.657，可根据实际比例微调 */
    top: 35.1%; /* 距离容器顶部的百分比 */
    left: 23.9%; /* 距离容器左侧的百分比 */
    background-size: cover; /* 让panel背景图自适应容器 */
    border: 5px solid red; /* 调试用，确认位置是否正确 */
}

替代方案：用padding-top维持宽高比（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的浏览器，可以通过伪元素+padding-top实现比例固定：

#panel{
    position: absolute;
    width: 49.7%;
    top: 35.1%;
    left: 23.9%;
    border: 5px solid red;
}

#panel::before{
    content: '';
    display: block;
    padding-top: 60.36%; /* 计算自：30%高度 / 49.7%宽度 ≈60.36%，保证宽高比 */
    background-image: url('radio.png');
    background-size: cover;
}

原代码适配问题说明 #

• 原#main的height:100%未生效：因为html和body默认没有设置100%高度，块级元素高度由内容撑开。
• position:relative的定位逻辑错误：top和left的百分比是相对于元素自身的静态位置，而非父容器#main。
• height:30vh的适配缺陷：vh是视口高度的百分比，当窗口宽高比变化时，会导致panel高度与背景图中目标区域的比例错位。

内容的提问来源于stack exchange，提问作者queendiarrhea