Navigation

1/14/2016

iFrame tag scaling

I want to display an iFrame with a scaled version of a web page, use CSS to do the scaling:



<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>
 
From stackoverflow   and collaboration133 
And can even scroll to a part of the web page: 


#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

<div id="my-div"> <iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe> </div>

No comments:

Post a Comment