<iframe>の縮小センタリング表示【HTML/CSS】

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
旧:ふくとも
記事: 12
登録日時: 6年前

<iframe>の縮小センタリング表示【HTML/CSS】

#1

投稿記事 by 旧:ふくとも » 6年前

C言語についての質問ではないのですが、現在<iframe>の縮小センタリング表示をしたいと思い
CSSで中央配置(センターリング)する方法
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
辺りを参考に画面中央に<iframe>を縮小して表示しようとしているのですが、上手くいきません。

表示したい幅は645px, 高さは800px
<iframe>で表示する元のページは幅がブラウザサイズによって可変(但しmin-width:655px;), 高さは2200pxです

縦のスクロールはして問題ないのですが、横のスクロールはしないように幅を調整する方法を教えていただきたいです。
よろしくお願いします。

-追記-
transform:scale(0.5);と記述したところ<iframe>のフレーム枠の幅が0.5倍になってしまいます

現在のコード

コード:

<body>
    <div class="center content">
        <iframe id="ifrm" src="http://hogehoge.com/">
            <a href="http://hogehoge.com/">http://hogehoge.com/</a>
        </iframe>
    </div>
</body>

コード:

body{
    min-width: 700px;
    padding: 0;
    margin: 0;
    text-align: center;
}
.center{
    margin: 0 auto;
    text-align: left;
}
.content{
    width: 645px;
    margin: 15px auto 0 auto;
}
#ifrm{
    width: 645px;
    height: 800px;
    margin: 0;
    padding: 0;
    border: none;
    // <iframe>の中身を横幅半分にして表示したい
    transform:scale(0.5);
    -o-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -ms-transform:scale(0.5);
    // 縮小の基準点を中央一番上(645/2≒323)に
    transform-origin:323 0;
    -o-transform-origin:323 0;
    -webkit-transform-origin:323 0;
    -moz-transform-origin:323 0;
    -ms-transform-origin:323 0;
}

“C言語何でも質問掲示板” へ戻る