2

アスペクト比に従って高さを維持しながら、親 div の幅に従ってフラッシュ ファイルを 100% スケールするという問題が発生しています。

jsFiddle (http://jsfiddle.net/LgegF) でコードを確認するか、以下のコードを空の HTML ページに貼り付けてください。

<!doctype html>

<html>
<head>
    <meta charset="utf-8">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

    <script type="text/javascript">
        swfobject.embedSWF("http://www.diescon.net/yellowfestival/400x400.swf", "flash-content", "100%", "100%", "9.0.0", '', null, {wmode: 'transparent'});
    </script>

    <style type="text/css">
        body {
            background-color: #ccc;
            margin: 0;
        }
        #container {
            width: 400px; /* Fixed width according to page template */
            height: auto; /* Container height should adapt to the content, we do not want to set a fixed height here */
            background-color: pink; /* Background of container */
            position: absolute;
            top: 0;
            left: 0;
        }
        #flash-content {
            width: 400px; /* Fill the width of the parent, could be fixed but ideally 100% */
            height: 100%; /* We want the height of the flash object/flash content to scale according to the aspect ratio of the swf, we do not want to set a fixed height here */
        }

        /* This is what we really want */
        #what-we {
            width: 400px;
            height: auto;
            background-color: pink;
            position: absolute;
            top: 0;
            right: 0;
        }
        #really-want {
            width: 100%;
            height: 400px; /* This is what we really want, but without setting this height fixed */
            background-color: yellow;
        }
    </style>
</head>
    <div id="container">
        <div id="flash-content"></div>
    </div>
    <div id="what-we">
        <div id="really-want">
            <span>This is what we really want</span>
        </div>
    </div>
</body>
</html>
4

3 に答える 3

0

フラッシュコンテナのcss高さ宣言をすべて省略します。Swfは通常スケールを実行します（または、埋め込み/ swfobjectオプションでスケールの動作を設定できます）。したがって、幅を制限するだけで、swf自体の高さがそれに応じてスケーリングされます。

[編集：]作業フィドル（非常に基本的なswf埋め込みコードを使用）：http：//jsfiddle.net/LgegF/1/ ブラウザーをスケーリングするときにswfがどのようにスケーリングするかに気づきます。swfの上下の白は、オブジェクトが含まれているためです。swfobjectまたはタグを使用すると、swf自体のスケーリング（スケールモード、整列、整列など）を制御できます。ただし、swfがコンテナの幅を使用してサイズを決定する方法、つまり、幅をフィッティングし、それに応じて高さをスケーリングする方法に気づきました。

于 2012-08-07T06:15:43.393 に答える