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/
Author by
Abdallah Sabri Hussein
Updated on August 21, 2022Comments
-
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>