Resize web page into a div

Question

in my project i load an external web page into a div with small dimension (250x295) with this function:

 <div> 
<object type="text/html" data="http://www.example.com" width="250px" height="295px" style="overflow:auto;border:5px ridge blue">
</object></div>

the problem is that in div i see just the 250x295 portion of page, need scroll to view all data. Is possible resize entire page related at the div dimension? (like a "preview")

Thanks in advance

may be this could help you,http://stackoverflow.com/questions/11382473/resize-external-website-content-to-fit-iframe-width — dreamweiver, Nov 28 '13 at 07:14
@LouisXIV: thumbnails api is used to resize the image and still retain the picture quality, here its a web page not a image, so it wont work — dreamweiver, Nov 28 '13 at 07:15

score 3 · Accepted Answer · answered Nov 28 '13 at 08:38

3

You can try with CSS3 2d transforms' scale() method:

div {
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
}

answered Nov 28 '13 at 08:38

Mark S

3,789
3
19
33

Good call, that was my first thought too. – Jordan Gray Nov 28 '13 at 08:46

score 1 · Answer 2 · answered Nov 28 '13 at 09:27

You arrange div's in this way make it look like preview, hope it will help.

<div style="border:5px ridge blue;display:inline-block;width:250px; height:295px;">
<div style="overflow:hidden;height:inherit; " >     

<object type="text/html" data="http://www.example.com"  
style="overflow:hidden;  height:inherit; position:relative; width:inherit;">    
</object> 

</div>
</div>

Demo

Resize web page into a div

2 Answers2