我有一个iframe与横幅广告在它（亚马逊关联链接），我想使横幅响应。在英国，亚马逊并不提供响应性的标语（他们的美国项目提供了）。
我的想法是将这个CSS添加到iframe标记中:
transform:scale(calc(100% / 728px));
或者类似的。
如果我用无单位的数字试一下，它就能用了。例如。calc(0.1+0.4)确实会将其缩放到50%。
但有了百分比和px，就没这么幸运了。
我在MDN https://developer.mozilla.org/en-us/docs/web/css/calc上看到，除法时的除数必须是数字，而不是单位长度。
有什么狡猾的把戏能让它工作吗？
谢啦！
我认为这在CSS中是不可能的（我希望被证明是错误的），所以这里有一个快速整合的JS解决方案。只适用于初始页面加载，但是如果需要的话，添加用户调整大小的支持是很简单的。
function getContentWidth (element) {
var styles = getComputedStyle(element)
return element.clientWidth
- parseFloat(styles.paddingLeft)
- parseFloat(styles.paddingRight)
}
const scale = getContentWidth(document.getElementById('banner').parentNode) / 728;
if (scale < 1) {
document.getElementById('banner').style.transform = 'scale(' + scale + ')';
document.getElementById('banner').style.transformOrigin = 'left';
}
