写一个布局，它的宽度是不固定的100%，如何让它的宽度始终是高度的一半呢？

要实现一个宽度为高度一半的布局，并且宽度还要是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>