我有一个内嵌横幅广告的iframe（亚马逊会员链接），我想使横幅具有响应性。在英国，亚马逊不提供响应式横幅（他们的美国计划提供）。
我的想法是将此CSS添加到iframe广告代码中：
transform:scale(calc(100% / 728px));
或类似。
如果我尝试使用无单位的数字，它将起作用。例如，calc(0.1 + 0.4)确实会将其缩放到50％。
但是有了百分比和px，就没有这种运气了。
我在MDN https://developer.mozilla.org/zh-CN/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';
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句