讓iframe內嵌視窗等比縮放

剛剛遇到一個小問題，別部門做的東西要放在網站上面，但我們家網站內容最寬只到820px，對方做的寬是1020px整整多了200px，為了不要浪費時間重做，於是上網google了一下，原來CSS3就可以解決我的問題，那就是用iframe搭配transform！

做的原理很簡單，先放一個div寫上需要的大小，裡面插入iframe並在CSS內寫上原始的大小及需要縮放的比例，以我的例子來說，transform設定scale(0.8)，但要注意的是，transform預設縮放中心點是在正中間，所以要再加一行transform-origin:0 0讓它對齊最左上角：
transform: scale(0.8);
transform-origin:0 0;  

當然，要相容各家舊版瀏覽器就別忘了加上前綴詞，於是就變成：
transform: scale(0.8);
transform-origin:0 0;
-ms-transform: scale(0.8); //ie
-ms-transform-origin:0 0;
-moz-transform: scale(0.8); //firefox
-moz-transform-origin:0 0;
-o-transform: scale(0.8); //opera
-o-transform-origin: 0 0;
-webkit-transform: scale(0.8); //chrome
-webkit-transform-origin: 0 0;

這樣完成啦！

有興趣看sample捧油可以參考這邊！