2014/11/17

讓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捧油可以參考這邊

1 則留言:

  1. SAMPLE網頁那邊我試了但是沒有等比例縮放

    回覆刪除