css 设置宽高比例的方式

1.padding方式(最优解)

利用padding的特性，padding的计算方式是以父级的宽度进行计算的，如果父级没有，则向上继续寻找，找不到则已屏幕宽为准

我们可以通过这一属性进行计算

普通版(用于图片背景图)

<div class="parent">
	<div class="aspect-ratio-box">
	</div>
</div>

.parent {
	width: 100px;
}
.aspect-ratio-box {
	width: 100px;
	padding-bottom: 100%;
}

进阶版（有内容的块）

核心 在下面加一个绝对定位块

<div class="parent">
	<div class="aspect-ratio-box">
		<div class="aspect-ratio-box-absolute">
		</div>
	</div>
</div>

.parent {
	width: 100px;
}
.aspect-ratio-box {
	width: 100px;
	padding-bottom: 100%;
	position: relative;
}
.aspect-ratio-box-absolute {
	position: absolute;
	width: 100%;
	height: 100%;
}

2.aspect-ratio属性

此属性可直接在元素上设置宽高比，但存在兼容性问题，可在手机端使用

	.aspect-ratio {
		aspect-ratio: 1/1; // 元素宽高比为1比1
	}

3.rem 或vw vh宽度

将宽度设为固定的rem或者vw vh属性；这样也可以做到宽高等比，通常用于响应式或大屏开发中，如果有需要，还要将rem做为动态尺寸。
动态rem: https://blog.csdn.net/weixin_49088636/article/details/128798911?spm=1001.2014.3001.5502