適合的絕對定位HTML的iframe

如何適應一個絕對定位的HTML的iframe？我需要這個讓它響應瀏覽器。我知道它應該使用媒體查詢創建，但它是使用一些在線html工具使用絕對定位創建的。適合的絕對定位HTML的iframe

所以我的計劃是使用將調整圖的基礎上的瀏覽器的寬度和高度的iframe。然後，內容的內容將根據iframe的大小進行縮放。

我已經嘗試過這一個

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

但它並沒有奏效。

的iframe中HTML的大小爲1920×1080。 iframe的大小爲1600x900。我需要適合1600x900的1920x1080，所以我需要縮小它。

來源

2016-02-19 Kiel

的可能重複[我怎樣才能縮放iframe的內容？]（http://stackoverflow.com/questions/166160/how-can-i-scale-the-內容的一個iframe） – LGSon

那裏的解決方案不適合我:( – Kiel

你可以顯示這個問題jsfiddle？ –

的iframe寬度/高度需要，如果你不想滾動條出現，以配合其源widht /高度設置，所以我將其更改爲1950px/1110（包括一些保證金）。

它的滾動條仍然顯示（含量比IFRAME更大），你通常會使用overflow: hidden，儘管它尚未完全跨瀏覽器的，但加入scrolling=no到iframe標記爲。

.wrap { width: 480px; height: 270px; padding: 0; overflow: hidden; } 
 
.frame { 
 
    -ms-zoom: 0.25; 
 
    -moz-transform: scale(0.25); 
 
    -moz-transform-origin: 0 0; 
 
    -o-transform: scale(0.25); 
 
    -o-transform-origin: 0 0; 
 
    -webkit-transform: scale(0.25); 
 
    -webkit-transform-origin: 0 0; 
 
} 
 
.frame.nr1 { width: 1950px; height: 1110px; border: 1px solid black; } 
 
.frame.nr2 { width: 1920px; height: 1080px; border: 1px solid black; }

<p>iframe with wider/higher settings</p> 
 
<div class="wrap"> 
 
    <iframe class="frame nr1" src="https://www.htechcorp.net/sandbox/sample.html"></iframe> 
 
</div> 
 
<p>iframe using `scrolling=no`</p> 
 
<div class="wrap"> 
 
    <iframe scrolling=no class="frame nr2" src="https://www.htechcorp.net/sandbox/sample.html"></iframe> 
 
</div>

來源

2016-02-19 11:02:34 LGSon

一些有點，但圖像應安裝在iframe不應該滾動以查看圖像的其他部分。 – Kiel

@Kiel更新，現在它。該ifame被設置爲1280，但iframe的來源是1920年，所以我更新的iframe 1920 – LGSon

IT工作！謝謝你太多了！ @lgson – Kiel

這段代碼的iframe的負責

answer

iframe, object, embed { 
     max-width: 100%; 
}

來源

2016-02-19 10:40:13 silviagreen

到HTML內部的iframe有尺寸爲1920x1080。 iframe的大小爲1600x900。我需要適合1600x900的1920x1080，所以我需要縮小它。 – Kiel

從這個http://jsfiddle.net/silviagreen/1jja3hk1/3/規模似乎工作 – silviagreen

這裏是我的小提琴，我想它已經https://jsfiddle.net/suf1fnmd/ – Kiel

適合的絕對定位HTML的iframe

回答

相關問題