要实现一个宽度为高度一半的布局，并且宽度还要是100%不固定，你可以使用CSS中的aspect-ratio属性。这个属性允许你指定一个元素的宽高比。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aspect Ratio Example</title>
<style>
.responsive-box {
width: 100%;
aspect-ratio: 2 / 1; /* 宽高比为2:1，即高度是宽度的两倍，反过来宽度就是高度的一半 */
background-color: lightblue; /* 示例背景色 */
}
</style>
</head>
<body>
<div class="responsive-box">
<!-- 内容 -->
</div>
</body>
</html>
解释：
.responsive-box：这是我们的目标元素，设置它的宽度为100%。aspect-ratio: 2 / 1：这个属性设置了元素的宽高比为2:1。因为我们需要宽度是高度的一半，所以反过来设置宽高比为2:1（即高度是宽度的两倍）。
兼容性：
aspect-ratio 属性在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Edge和Safari（需要最新版本）。如果你需要支持更老的浏览器，你可能需要使用其他技术，比如JavaScript来动态调整尺寸。
使用JavaScript（备选方案）：
如果你需要支持更老的浏览器，可以使用JavaScript来动态调整元素的宽度和高度。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aspect Ratio Example with JavaScript</title>
<style>
.responsive-box {
width: 100%;
background-color: lightblue; /* 示例背景色 */
}
</style>
</head>
<body>
<div class="responsive-box" id="responsiveBox">
<!-- 内容 -->
</div>
<script>
function adjustAspectRatio() {
const box = document.getElementById('responsiveBox');
const height = box.clientHeight;
box.style.width = `${height / 2}px`;
}
// 初始调整
adjustAspectRatio();
// 监听窗口大小变化
window.addEventListener('resize', adjustAspectRatio);
</script>
</body>
</html>
解释：
- JavaScript：在窗口加载和大小变化时，通过JavaScript动态调整元素的宽度。
adjustAspectRatio函数：获取元素的高度，并将宽度设置为高度的一半。
这种方法虽然不如直接使用CSS aspect-ratio 简洁，但在需要兼容更老浏览器时是一个有效的备选方案。