如何縮放到iframe中的某個元素響應？

我試過幾種方法的iframe該開口不在同一個域中如何縮放到iframe中的某個元素響應？

它`正常工作與包裹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; 
}

我的問題是內擴展到HTML元素我如何使這個響應？在所有設備（手機）上的縮放比例是相同的，我想我們需要一些JavaScript代碼來做到這一點？

來源

2017-04-03 VladL

你想響應什麼，'iframe'裏面的'iframe'或'div'？ –

由於*「同源策略」，您無法在iframe中執行任何操作* – charlietfl

iframe中的@NeilPatrao內容 – VladL

我認爲最好的解決方案是使用純HTML。

此代碼的目的是將底部填充設置爲視頻或iframe的寬高比。然後將iframe的寬度和高度都縮放到100％，這樣就完全填充了外部容器。外部容器現在可以根據其寬度自動調整其高度，並且iframe會相應地進行調整。

<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>

的jsfiddle：

https://jsfiddle.net/4Lmjb3ge/

我希望這回答了你的問題。

來源

2017-04-03 10:43:23

如何縮放到iframe中的某個元素響應？

回答

相關問題