<iframe>内コンテンツのサイズ変更

HTML/CSS

お久しぶりです、旧:ふくともです

先日webサイトに別のページを取り込み、その取り込んだページのサイズを指定サイズに変更したいなぁ、と思ったところ割と手こずったので書き出しておこうと思った次第。

※CSS3でないとうまく行きません。

HTML

<div class="parent">

  <div class="child">

    <iframe id="external" src="SITE URL" scrolling="no"></iframe>

  </div>

</div>

CSS

#external{

  width:578px;

  height:771px;

  transform:scale(0.65); transform-origin:0 0;

  -o-transform:scale(0.65);-o-transform-origin:0 0;

  -webkit-transform:scale(0.65); -webkit-transform-origin:0 0;

  -moz-transform:scale(0.65); -moz-transform-origin:0 0;

  -ms-transform:scale(0.65); -ms-transform-origin:0 0;"

}

.parent{

  width:375px;

  height:400px;

  overflow-x:hidden;

}

.child{

  width:375px;

  height:450px;

  overflow:hidden;

}

 

〜解説〜

#external

<iframe>のサイズは内部コンテンツと同じに設定(私が使ったものは578×771だったのでこの値、適宜変更してください)

構造上、上の階層の<div>からはみ出してしまうのでscrolling="no"

transform:scale(N);は縦横比を維持し内部コンテンツをN倍にするので、横幅を表示したい領域(後述のparent)に合わせて375/578≒0.65

transform-origin:0 0;は縮小の起点座標ををコンテンツの左上に設定する(デフォルトではコンテンツの中心)

 

.parent

表示したいサイズを設定

横幅がはみ出してしまうためoverflow-x:hidden;を指定

 

.child

横幅に合わせたコンテンツのサイズを設定

縦幅がはみ出すのでoverflow:hidden;を指定

横幅はぴったり合わせてあるのでoverflowにしたが、明示的にoverflow-yでも問題ない。

 

transformの仕様上、コンテンツの上下左右に余計なマージンが発生するので、コンテンツサイズに合わせた<div class="child">を<div class="parent">上でスクロールさせて実装している。