<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
/*
CSS 中的百分比 padding 规则（例如 padding-top: 50%）
在 CSS 中，padding 的百分比值（包括 padding-top、padding-bottom、padding-left、padding-right）始终是相对于父元素的宽度（width）计算的，
而不是父元素的高度。这是一个 CSS 规范的定义，即使是垂直方向的 padding-top 或 padding-bottom，也遵循这个规则。
规范依据：
根据 CSS 2.1 及后续规范（例如 CSS Box Model），padding 的百分比值是基于包含块（containing block）的宽度计算的。
通常，包含块的宽度就是父元素的宽度。
为什么这样设计：
这种设计让布局更可预测，尤其在响应式设计中，宽度通常是已知的，而高度可能是动态变化的。
*/
/*
此时，这里的 width 就是宽度，padding-top 就是高度。
*/
.img-wrapper {
position: relative;
width: 100%;
/* 用高度÷宽度×100% 计算，例如 400px ÷ 800px × 100% = 50% */
padding-top: 50%;
}
.img-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 可选 */
border: 1px solid red;
}
</style>
</head>
<body>
<div class="img-wrapper">
<img />
</div>
</body>
</html>
index.html