我已经确定了如何根据宽度设置 div 高度（使用百分比宽度和填充底部）。但我还需要能够根据其高度设置 div 宽度。我曾尝试使用 vw/vm/vh 单位，但这些是相对于视口而不是容器。
所以，在下面的例子中
<body>
<div class="rectangle">
<div class="square">
</div>
</div>
</body>
这是一些仅适用于纵向的非工作 CSS：
.rectangle {
background-color:red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.square {
background-color:blue;
width:100%;
padding-bottom:100%;
}
我希望 .rectangle 填充其容器，这意味着随着窗口大小的变化，.rectangle 可能会从横向布局变为纵向布局。发生这种情况时，我希望 .square div 在不丢失其方形的情况下尽可能地填充。
因此，如果浏览器窗口的宽度大于高度（横向），则 .rectangle 应填充窗口，并且 .square 应与矩形的高度一样高，与矩形的高度一样宽。
如果浏览器窗口的高度大于宽度（纵向），则 .rectangle 应填充窗口，并且 .square 应与矩形的宽度一样宽，与矩形的宽度一样高。
所以，我可以使用媒体查询在横向和纵向之间交换样式，并且我有纵向案例的解决方案，但我还没有找到横向案例的解决方案。如何让正方形填充其父级的高度，并限制其宽度以保持正方形的纵横比？
css ×1