Автоматическое масштабирование (изменение размера) изображения в iframe

Question

В Firefox при загрузке изображения в iframe изображение будет автоматически уменьшено до размера (если оно слишком велико). (Это функция Firefox, которую можно отключить с помощью настройки Firefox browser.enable_automatic_image_resizing.)

Я хотел бы настроить свои страницы так, чтобы они имели такое же поведение при просмотре с другими браузерами, такими как 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> 

Answer 1

Хорошо поэтому следующий код ручка должна быть хорошими прыжками от точки:

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

Я бегу мало времени, в противном случае, я бы усовершенствовать масштабирование/проклейки.

В любом случае, как вы можете видеть, я завернул IFRAME в DIV:

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

Затем вы установите дел до нужной ширины и высоты - как только вы это, вы установите IFRAME на «Transform : scale ", который уменьшит iframe, поэтому вам нужно установить ширину и высоту на кратное шкале. Например, вы устанавливаете ширину и высоту 400px на 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