我已经确定了如何根据宽度设置 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 应与矩形的宽度一样宽，与矩形的宽度一样高。
所以，我可以使用媒体查询在横向和纵向之间交换样式，并且我有纵向案例的解决方案，但我还没有找到横向案例的解决方案。如何让正方形填充其父级的高度，并限制其宽度以保持正方形的纵横比？
你可以：
\n\n将替换元素以 1:1 的比例放置在正方形内。
\n\n例如，它可以是 1px \xc3\x97 1px 方形图像，或画布。
\n\n将其样式替换为height: 100%，以便它垂直跨越整个正方形。
让它具有 default width: auto，以便其宽度符合 1:1 的纵横比。
对其进行样式设置display: block以避免图像下方出现额外空间的问题。
让正方形使用收缩到适合宽度算法来计算其宽度，这样它也将具有 1:1 的比例。
\n\n您可以通过浮动它或使用 来实现这一点display: inline-block。
如果您希望正方形包含内容，请将它们放置在绝对定位的包装中，以防止它们改变正方形的大小。
\n\n使该包装纸与 的正方形一样大top:0; right:0; bottom:0; left:0，并将该正方形设为其相对容器。
这应该有效。但是，由于某种原因，浏览器在调整窗口大小时似乎不会更新宽度，因此它仅在最初有效。使用 JS 强制重新渲染可以解决这个问题。
\n\nvar s = document.getElementById(\'square\'),\r\n p = s.parentNode,\r\n n = s.nextSibling;\r\nwindow.addEventListener(\'resize\', function() {\r\n // Force a rerender\r\n p.removeChild(s);\r\n p.insertBefore(s, n);\r\n});html, body, #square, canvas {\r\n height: 100%;\r\n margin: 0;\r\n display: block;\r\n}\r\n#square {\r\n float: left;\r\n position: relative;\r\n background: red;\r\n}\r\n#contents {\r\n overflow: auto;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n}<div id="square">\r\n <canvas height="1" width="1"></canvas>\r\n <div id="contents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</div>\r\n</div>