为何iframe设置aspect-ratio: attr(width)/attr(height)不生效

问题核心原因 #

你写的写法不生效的核心是CSS attr() 函数的支持度限制：

• 目前所有公开支持的浏览器中，attr() 仅允许在 content 属性中作为字符串类型使用，不支持在其他CSS属性中返回数值、比例等其他类型的值，也不能直接参与运算。
• 你提到的Firefox内部CSS用到该写法，属于浏览器自身的UA样式表私有实现，属于未对外公开的内部特性，普通网页代码无法调用该能力。
• 你在CSS-Tricks看到的相关技巧，大概率是介绍浏览器内置的替换元素宽高比自动计算特性，不是让你手动写attr()版的aspect-ratio声明，属于对技巧内容的理解偏差。

正确实现方式 #

现在主流浏览器本身已经内置了替换元素的宽高比自动计算逻辑：对于<img>、<iframe>、<video>这类带width、height原生属性的替换元素，浏览器会自动读取属性上的数值计算固有宽高比，你不需要额外手动声明aspect-ratio，只要保留width: 100%; height: auto的写法就能实现自适应等比缩放效果。

修正后的CSS代码如下：

body {
  background-color: black;
  color: white;
}

iframe {
  width: 100%;
  height: auto;
  border: 1px solid red;
}

原HTML代码无需改动，浏览器会自动读取<iframe>上的width="560" height="315"计算对应宽高比实现自适应。

内容的提问来源于stack exchange，提问作者redanimalwar