在iframe中自動縮放（調整大小）圖像

在Firefox中，將圖像加載到iframe時，圖像將自動縮小以適合（如果太大）。（這是一項可通過Firefox設置browser.enable_automatic_image_resizing禁用的Firefox功能。）在iframe中自動縮放（調整大小）圖像

我想設置我的頁面，以便在使用其他瀏覽器（例如Chrome和Internet Explorer）查看時具有相同的行爲。

下面是一個例子，看看它與Chrome或IE瀏覽器，並比較它與Firefox：http://codepen.io/anon/pen/KddKQX

下面的代碼：

<iframe frameborder='0' scrolling='no' src='http://ibin.co/2F6DxpSecv9h' height='600px' width='400px'> 
</iframe>

來源

2015-09-09 jdigital

好了，下面的代碼筆應該是一個不錯的跳躍客點：

http://codepen.io/anon/pen/OyRgmw

我的時間所剩無幾，否則，我會完善縮放/大小。

不管怎麼說，你可以看到，我包裹在一個div的iframe：

<div class="wrap"> 
    This version works on FF 26, Chrome 32, Opera 18, and IE 9-11. 
    <iframe class="frame" src="http://ibin.co/2F6DxpSecv9h"></iframe> 
</div>

然後，設置DIV到所需的寬度和高度 - 一旦你有了這個，你設定的iframe「轉化：縮放「，這將縮小iframe，這就是爲什麼您需要將寬度和高度設置爲縮放倍數的原因。例如，將「寬度」和「高度」設置爲400像素×600像素 - 由於圖像縮放比例（.25），因此您希望將幀尺寸乘以4 - 以下CSS將達到預期效果：

.wrap { 
    width: 400px; 
    height: 600px; 
    padding: 0; 
    overflow: hidden; 
} 

.frame { 
    width: 1200px; 
    height: 1800px; 
    border: 0; 
    -ms-transform: scale(0.25); 
    -moz-transform: scale(0.25); 
    -o-transform: scale(0.25); 
    -webkit-transform: scale(0.25); 
    transform: scale(0.25); 

    -ms-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 
}

所以就像我說的，它不是100％完成，但你應該能夠調整數字來實現你想要的。讓我知道你是否需要任何澄清或進一步的信息。

這裏再次是codepen鏈接：http://codepen.io/anon/pen/OyRgmw

來源

2015-09-23 22:15:55 rockmandew

感謝您的回答。我事先不知道圖像的大小。這個解決方案可以用於解決這個限制嗎？ – jdigital

讓我修改答案 - 今天我應該有一些空閒時間。 – rockmandew

當我問這個問題時，我還沒有考慮過另一個問題。這種方法會縮小幀內容，而不管它是否爲圖像。是否有可能將此行爲限制爲圖像？ – jdigital

在iframe中自動縮放（調整大小）圖像

回答

相關問題