aspect-ratio 属性为何对非替换元素无效？检查自动尺寸
aspect-ratio 属性仅在元素至少有一个尺寸为自动时才生效，若宽高均固定则无法调整比例。
检查元素尺寸是否包含自动值
aspect-ratio 属性仅对自动尺寸的元素生效，若宽度和高度均为固定值，则该属性不会改变元素的宽高比。浏览器在计算尺寸时，若宽高均非自动，则忽略 aspect-ratio 的值。检查代码中 width 和 height 是否同时被设置为具体数值，例如 px 或百分比。若两者均非 auto，则 aspect-ratio 将不会影响布局。
在 CSS 中，width 和 height 的默认值均为 auto，这意味着浏览器会根据内容自动计算尺寸。若手动指定了 width: 200px 和 height: 200px，则 aspect-ratio: 1/1 将不会生效。要使 aspect-ratio 生效，必须至少保留一个尺寸为 auto，例如 width: auto; height: 200px;。
验证 aspect-ratio 对自动尺寸的计算作用
当元素至少有一个尺寸为自动时，aspect-ratio 属性会根据指定的宽高比计算另一个尺寸。例如，设置 width: auto; height: 200px; aspect-ratio: 16/9;，浏览器会自动计算宽度为 355.56px。这种计算确保元素在容器尺寸变化时保持宽高比。
aspect-ratio 的计算基于 box-sizing 定义的尺寸模型。若 box-sizing 为 border-box，则计算基于边框盒尺寸；若为 content-box，则基于内容盒尺寸。确保在检查时明确 box-sizing 的值，以准确判断计算结果是否符合预期。
区分替换元素与非替换元素的行为差异
对于替换元素（如 img），aspect-ratio 的行为略有不同。若同时指定 auto 和比例值，且元素有自然宽高比，则加载前使用指定比例，加载后使用自然比例。对于非替换元素，则始终使用指定的比例值。检查元素类型是否为替换元素，以确定行为是否符合预期。
非替换元素（如 div）的 aspect-ratio 始终生效，除非宽高均固定。替换元素的行为由内容决定，但 aspect-ratio 仍可用于预加载时的占位布局。确保理解元素类型对属性行为的影响，以避免误判问题原因。
排查 aspect-ratio 不生效的复现步骤
1. 检查 CSS 中 width 和 height 是否同时为固定值。若均为固定值，aspect-ratio 将无效。2. 将其中一个尺寸改为 auto，例如 width: auto; height: 100px;。3. 添加 aspect-ratio: 1/1;，观察元素是否按比例调整。4. 使用浏览器开发者工具检查计算后的样式，确认宽高比是否生效。
若修改后仍不生效，检查 box-sizing 是否影响计算。确保至少一个尺寸为 auto，且 aspect-ratio 值正确。通过复现步骤，可以快速定位 aspect-ratio 无效的根本原因。验证结果应显示元素按指定比例调整尺寸。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。