1

次のコードを使用して、1 つのサイト内に他の Web サイトのミニチュアのライブ バージョンを表示しました。

iframe {
    -moz-transform: scale(0.25, 0.25); 
    -webkit-transform: scale(0.25, 0.25); 
    -o-transform: scale(0.25, 0.25);
    -ms-transform: scale(0.25, 0.25);
    transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    border: solid #ccc 10px;
    width:1024px;
    height:768px;
}

高さと幅のプロパティもスケーリングされているように見えるので、モニターのサイズにしました (これは、表示したいサイズの 4 倍でもあります)。これにより、iframe は 256 ピクセル x 192 ピクセルになりますが、1024 ピクセル x 768 ピクセルのようにページ上のスペースを占有します。iFrames ラッパーのサイズを定義することでこれを解決しました。

私の質問は、オブジェクトをスケーリングした場合、元のスペースを占有するのはなぜですか?

4

3 に答える 3

1

説明

W3C ドキュメントは、あなたの質問に答えるのに役立ちます。以下の引用はそこから来ています。

css3 変換の現在の実装 (私の知る限り) は、具体的には次の 2 つのモデルのうちの最初のモデルに従います。

コンテンツの通常のレイアウトを変更せずに、影響を受けるコンテンツの位置を調整する変換 (相対的な配置によく似ています)

さらに、次のように述べています。

このモジュールは、それらのプロパティが適用される要素の視覚的なレンダリングに影響を与える一連の CSS プロパティを定義します。これらの効果は、要素が [CSS21] のビジュアル フォーマット モデルに従ってサイズ設定および配置された後に適用されます。

その最後の引用の鍵は「ビジュアル レンダリング」です。つまり、スケーリング (あなたの場合) は外観を視覚的に変更しますが、html 自体のフロー内のオブジェクトの実際のピクセル寸法は変更しません。最初の引用が指摘したように、要素が占めるposition: relative「スペース」が通常のフロー位置にある場所を使用してシフトされた要素によく似ていますが、視覚的な表示は他の場所にシフトされる可能性があります (top: 100pxまたは他の位置シフトによって)。

シナリオの修正?

更新：テストで機能しないことが示されたため、このセクションの元の回答を削除しました。したがって、あなたが望むことをするための本当の解決策はありません。

于 2012-06-29T16:46:21.897 に答える
0

私が推測しなければならないとしたら、私はこのcssと言うでしょう：

width:1024px;
height:768px;

これの原因です。これにより、iframeにそのサイズが1024x768であることが通知され、その結果、これらはiframeがブラウザに報告するサイズになります。次に、ブラウザはiframeをこの量のスペースを占めるかのように扱い、それに応じてレンダリングします。

確認するために、FirefoxのFirebugやChromeのDeveloper Toolsなどのツールを使用し、問題の要素を調べて、そのディメンションがどのように報告されているかを確認することをお勧めします。

于 2012-06-29T16:03:19.950 に答える