Question

我已经尝试了几种方法来扩展到iframe中的HTML元素，而不是在同一个域上打开

它适用于包含div的转换比例属性

<div class="wrapper">
    <iframe class="scaled" src="frame.html" scrolling="no" frameborder="0"></iframe>
</div>
.wrapper {
    position: absolute;
    width:100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transform: scale(4,33) translateY(-107px) translateX(-240px);
}

iframe.scaled {
    overflow: hidden;
    width: 1920px;
    height: 1080px; 
}

我的问题是我如何才能使这个响应？在所有设备（移动设备）上缩放是相同的，我想我们需要一些javascript代码才能做到这一点？

Answer 1

我认为最好的解决方案是使用纯HTML。

此代码的目的是将底部填充设置为视频或iframe的宽高比。然后将iframe在宽度和高度上缩放到100％，这完全填充外部容器。外部容器现在可以根据它的宽度自动调整它的高度，并相应地调整iframe。

＆＃13;

<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
    <iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
        src="https://www.w3schools.com/html/">
    </iframe>
</div>

＆＃13;

<强>的jsfiddle：

https://jsfiddle.net/4Lmjb3ge/

我希望这能回答你的问题。

如何扩展到iframe响应中的某个元素？

1 个答案: