Scale website into iframe. HTML

vicnumb Jun 21, 2013

Jun 21 2013 Published by under HTML&CSS, Tricks

Website thumbnail/iframe scale integration into another website.

Building a modern website directory requires besides of each website description integration of its thumbnail/scaled iframe.

1. One of the best thumbnail solutions is phantom JS project with its screen capture ability.
The only requirement to this project is a dedicated server with ssh root access.

2. The CSS3+HTML iframe scaling solution

<style>
#scaled{
    width: 448px; /* scaled website screen width */
    height: 358px; /* scaled website screen height */
    padding: 0;
    overflow: hidden;
}
 
#scframe{
  width: 1280px; /* website screen width */
  height: 1024px; /* Website screen height */
  border: 0;
  /* iframe zoom out. Cross browser solution. Full size - 1.0; Half size - 0.5 */
  -ms-zoom: 0.35;
  -transform: scale(0.35);
  -moz-transform: scale(0.35);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.35);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.35);
  -webkit-transform-origin: 0 0;
}
</style>
<p>Content before iframe</p>
 
<div id="scaled">
  <iframe id="scframe" src="http://yahoo.com"></iframe>
</div>
 
<p>Content after iframe</p>

3. Just to mention JavaScript+HTML iframe website re-size by squeezeFrame.js and Wookmark jQuery website integration and resize. jQuery solution can be integrated into any container.

One response so far

Leave a Reply