how to zoom content in iframe to fit my page size

14,027

This works well after for hours trying to get it to work in IE8, 9, and 10 here's what worked for me.

//html

<div class="wrap">
    This version works on FF 26, Chrome 32, Opera 18, and IE 9-11. 
    <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://www.knowledgecity.com/activities/BUS1058-008/BUS1058-008.html"></iframe>
</div>

//javascript

.wrap {
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}
.frame {
    width: 1280px;
    height: 786px;
    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;
}

http://jsfiddle.net/AwokeKnowing/yy8yb/

Share:
14,027
Abdallah Sabri Hussein
Author by

Abdallah Sabri Hussein

Updated on August 21, 2022

Comments

  • Abdallah Sabri Hussein
    Abdallah Sabri Hussein over 1 year

    I need to place this iframe inside my page, I need to zoom it (to be smaller)

    the original page is http://palweather.ps/temps/days/forecast/120

    I tried the following code (I added #zoom=75 after the link but it didn't work)

        <iframe border="0" frameborder="0" height="1300" name="map" src="http://palweather.ps/temps/days/forecast/120#zoom=75" style="width: 100%;" >Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>