・外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
・CSSで中央配置(センターリング)する方法
を参考に画面中央に<iframe>を縮小して表示しようとしているのですが、上手くいきません。
表示したい幅は645px, 高さは800px
<iframe>で表示する元のページは幅がブラウザサイズによって可変(但しmin-width:655px;), 高さは2200pxです縦のスクロールはして問題ないのですが、横のスクロールはしないように幅を調整する方法を教えていただきたいです。
よろしくお願いします。
-追記-
transform:scale(0.5);と記述したところ<iframe>のフレーム枠の幅が0.5倍になってしまいます
現在のコード
HTML
lang
1<body> 2 <div class="center content"> 3 <iframe id="ifrm" src="http://hogehoge.com/"> 4 <a href="http://hogehoge.com/">http://hogehoge.com/</a> 5 </iframe> 6 </div> 7</body>
CSS
lang
1body{ 2 min-width: 700px; 3 padding: 0; 4 margin: 0; 5 text-align: center; 6} 7.center{ 8 margin: 0 auto; 9 text-align: left; 10} 11.content{ 12 width: 645px; 13 margin: 15px auto 0 auto; 14} 15#ifrm{ 16 width: 645px; 17 height: 800px; 18 margin: 0; 19 padding: 0; 20 border: none; 21 // <iframe>の中身を横幅半分にして表示したい 22 transform:scale(0.5); 23 -o-transform:scale(0.5); 24 -webkit-transform:scale(0.5); 25 -moz-transform:scale(0.5); 26 -ms-transform:scale(0.5); 27 // 縮小の基準点を中央一番上(645/2≒323)に 28 transform-origin:323 0; 29 -o-transform-origin:323 0; 30 -webkit-transform-origin:323 0; 31 -moz-transform-origin:323 0; 32 -ms-transform-origin:323 0; 33}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。