Fit iFrame Into Container

We want an external (cross domain) website to be fitted into a fixed size container (iframe). We can achieve this using CSS3 transform scale property.

Step 1: Decide how the external website to look like. Let say 1600 × 900

<iframe src="http://test.com" width="1600" height="900"></iframe>

Step 2: Remove scroll bar (optional)

<iframe src="http://test.com" width="1600" height="900" scrolling="no"></iframe>

Step 3: Let say we want to shrink from 1600 × 900 to 400 × 225. So 400 ÷ 1600 = 0.25. We also need the transform origin to be at top left

<iframe src="http://test.com" width="1600" height="900" scrolling="no" style="transform:scale(0.25); transform-origin:0 0;"></iframe>

Sample code on how to monitor several blogs using iframe:

Download


Topic alias: external website monitoring, thumbnail website, website preview