padding-top百分比能固定图片宽高比是因为其值相对于父元素宽度计算，结合position: relative与absolute可“挤出”所需高度；SCSS函数aspect-ratio($width, $height)自动计算并返回percentage($height/$width)，如16:9得56.25%。
为什么 padding-top 百分比能固定图片宽高比
因为 padding-top 的百分比值是相对于**父元素宽度**计算的，不是高度。当你把一个容器设为 position: relative，再给子元素（如 <img alt="如何使用SCSS实现CSS图片长宽比固定_通过padding-top百分比计算" > 或 <div>）设 <code>position: absolute 并撑满，就能用 padding-top “挤出”所需高度空间。
比如 16:9 的比例，高度应为宽度的 9 / 16 = 56.25%，所以设 padding-top: 56.25% 即可。
SCSS 中用函数自动算 padding-top 值
手算比例容易出错，也难维护。直接封装一个 SCSS 函数更可靠：
@function aspect-ratio($width, $height) {
@return percentage($height / $width);
}用法示例（16:9 容器）：
立即学习“前端免费学习笔记（深入）”；
.aspect-16x9 {
position: relative;
width: 100%;
padding-top: aspect-ratio(16, 9); // 输出 56.25%
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("image.jpg") center/cover;
}
}- 函数参数顺序是
$width, $height，和常见“宽×高”写法一致 - 必须配合
position: relative+absolute子元素，否则padding-top只是额外内边距，不参与宽高比控制 - 不要在同一个元素上同时设
height和padding-top，否则高度会叠加
图片内容怎么居中且不拉伸
用 background-image 最稳妥，避免 img 标签默认 inline 行为和替换元素缩放逻辑干扰。但要注意几个关键点：
- 子元素（如伪元素或空
<div>）必须设 <code>position: absolute并四边归零（top: 0; left: 0; right: 0; bottom: 0） - 背景图推荐用
background-size: cover（裁剪居中）或contain（完整显示），别用100% 100%，会强制拉伸 - 如果必须用
<img alt="如何使用SCSS实现CSS图片长宽比固定_通过padding-top百分比计算" >标签，得加height: 100%+object-fit: cover，但此时父容器需有明确高度来源（即靠padding-top撑开），且 IE 不支持object-fit - 父容器没设
width（比如 flex 项默认flex-basis: auto），导致padding-top百分比失去参照基准 - 用了
max-width但没同步约束实际渲染宽度，建议统一用width: 100%+max-width: xxx - SCSS 编译后 CSS 被其他规则覆盖（比如某个全局
* { box-sizing: border-box }没生效，导致 padding 计算偏差） - 在 Grid 或 Flex 容器里，某些浏览器对
padding-top百分比的解析仍存在兼容差异，可加min-height: 0强制重置主轴尺寸参考
响应式下失效？检查这些地方
常见“在手机上看比例崩了”的原因往往不是 SCSS 写错，而是布局上下文被破坏：
最保险的做法：始终让宽高比容器的直接父级有明确、可测量的宽度，并避免嵌套多层相对定位干扰。
