縮放圖像URL以適應Iframe

是否可以使用iframe直接鏈接到大圖像，而不必使用水平滾動條或切斷圖像？縮放圖像URL以適應Iframe

我在這裏做一個例子來說明我的意思： http://jsfiddle.net/yLu3acL4/1/

HTML

<div class="wrapper"> 
    <div class="iframe-holder"> 
     <iframe src="somelargeimageontheweb.jpg" frameborder="0" allowfullscreen></iframe>  
    </div> 
</div>

CSS

html,body{height:100%;} 
.wrapper{ 
    width:100%; 
    height:80%; 
    background:#CCC 
} 
.iframe-holder{ 
    position:relative; 
    width: 100%; 
    height: 100%; 

} 
.iframe-holder iframe { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}

它直接鏈接到一個.JPG URL，但它放大100％，創建2個滾動條。我只需要圖像的寬度與iframe的寬度相匹配，高度僅取決於圖像比例。

我想到的例子是，當您在谷歌上搜索大圖時，頁面開始縮小，以便您可以看到整個圖像，並允許您單擊以100％查看;

來源

2015-12-06 Michael Truong

你不需要使用iframe來獲得你想要的結果。

相反，你可以把它改成一個img標籤，改變你的CSS這樣的：

.iframe-holder{ 
    width: 50px; 
    height: 50px; 
    position: relative; 
} 
.iframe-holder img { 
    max-width:100%; 
    max-height:100%; 
    margin:auto; 
    display:block; 
}

更改iframe的架的寬度和高度，以任何你想要的和影像尺寸會自動調整到大小的DIV。

來源

2015-12-07 00:08:01

啊哈哈我現在覺得很愚蠢。雖然我喜歡得到這樣的答案，但我認爲我必須做些複雜的工作來完成這項工作。自從我加載YouTube視頻以及圖片以來，我一直在使用iframe。 –

滾動條在這裏是因爲iframe中的body元素具有非零邊距屬性。

可能的解決方案是將marginwidth="0"屬性添加到iframe，但不再支持HTML5（!!!）。（在http://jsfiddle.net/yLu3acL4/5/上的示例）

如果這些圖像將託管在同一個域上，您可以使用一些JS魔術來獲得相同的結果，但在不同的域上這是不可能的。

來源

2015-12-07 00:01:20 hKaspy

縮放圖像URL以適應Iframe

回答

相關問題