如何保持元素宽高比首先看页面效果：代码为：要实现红色区域宽高比：方法一：可以为".item"设置css属性：as

首先看页面效果：

截屏2025-08-24 16.25.39.png

代码为：

<body>
    <div class="item">
    </div>
</body>

.item{
    width: 50%;
    background: #f40;
    margin: 0 auto;
    height: 300px;
}

要实现红色区域宽高比：

方法一：可以为".item"设置css属性：aspect-ratio，例如：

.item{
    width: 50%;
    background: #f40;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    // 注意需要去除height属性
}

但是“aspect-ratio”兼容性不好，想要更好的兼容，可以用下面方法

方法二：为".inner"添加一个子元素，并通过设置padding实现，代码如下：

<body>
    <div class="item">
        <div class="inner">
        </div>
    </div>
</body>

 .item{
    width: 50%;
    background: #f40;
    margin: 0 auto;
}
.inner{
    width: 100%;
    padding-top: 75%;   
}

实现原理：padding 百分比相对于包含块的宽度（".inner"的包含块是".item",并且".item"有宽度),因此可以设置".inner"的css属性：padding-top：75%，将元素撑开，又实现了宽高比。效果如下：

可以看到视口变化口，".inner"保持着相同的宽高比。

以上文档根据渡一教育短视屏做的总结