有没有人知道如何在宽度和高度上按比例缩放？我有一个具有以下设置的DIV容器：

<代码><；样式>；#容器{宽度：100%；高度：Calc（100VW*1.72）；背景：红色；}<；/样式>；<；DIV ID="；容器"；>；<；/DIV>；

当我调整浏览器窗口的宽度时，区域会缩放。但是，当我调整浏览器窗口的高度时，没有发生缩放。

有没有一个简单的CSS解决方案？

顺晟科技：

试试宽高比

<style>
#container {
width: 100%;
height:calc(100vw * 1.72);
background:red;

}
</style>
       
<div id="container"></div> 

请记住，纵横比并不适用于所有浏览器。访问关于纵横比的Mozilla说明以查看支持的浏览器

您可以按比例缩放元素，方法是按所需的比率为其子元素提供width:100%; aspect-ratio:1; 百分比值。下面的示例有一个元素，其高度是其父元素宽度的2倍。

有更多关于技术的细节。

padding-top

<代码><；DIV类=“容器”>；<；DIV类=“外部”>；<；DIV类=“内部”>；您的内容<；/DIV>；<；/DIV>；<；/DIV>；