css 属性: aspect-ratio
兼容性问题：Google 浏览器 2021 年后 88+ IE 不支持 （ Can I Use ）
- 宽度不固定
- 高度不固定（ 不给高度 height ）
html
<body>
<style>
div {
width: 50%;
background-color: red;
aspect-ratio: 1/2;
}
</style>
<div></div>
</body>使用padding + 定位
html
<body>
<style>
.item {
background-color: red;
width: 50%;
margin: 0 auto;
}
.inner {
/* 跟随父原生的宽度变化 */
width: 100%;
/* 需要了解视觉格式化模型和包含块 */
/* padding的百分比相当于父元素的百分比 */
padding-top: 75%;
/* 此定位是为了container使用 */
position: relative;
}
.container {
position: absolute;
/* CSS 属性 inset 为简写属性，对应于 top、right、bottom 和 left 属性。其与 margin 简写属性具有相同的多值语法 */
inset: 0;
background-color: blue;
}
</style>
<div class="item">
<div class="inner">
<div class="container">这是测试文字</div>
</div>
</div>
</body>