2

我们在根据父 div 宽度使 Flash 文件缩放 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

3

我有一个类似的问题，我发现这个页面非常有用： http ://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

根据我在本文中学到的知识，我建议将您的 HTML 代码更改为：

<div id="container">
    <div class="videoWrapper">
        <div id="flash-content"></div>
    </div>
</div>

并通过添加更改您的 CSS 代码：

.videoWrapper {
    position: relative;
    padding-bottom: 100%;  /* 1:1 */
    padding-top: 0px;
    height: 0;
}
.videoWrapper object, .videoWrapper embed, {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

你可以在这里看到结果：http: //jsfiddle.net/LgegF/56/

希望这有帮助。

帕特布里佩索

于 2013-06-21T21:04:29.237 回答
0

一起省略 flash 容器的 css 高度声明。Swf 通常会进行缩放（或者您可以在嵌入/swfobject 选项中设置它们的缩放行为），因此如果您只是限制宽度，则 swf 本身的高度也会相应地缩放。

[编辑：] 工作小提琴（带有非常基本的 swf 嵌入代码）：http: //jsfiddle.net/LgegF/1/ 您注意到缩放浏览器时 swf 是如何缩放的。swf 顶部和底部的白色是由于包含对象、swfobject 或标签，您可以控制 swf 本身的缩放方式（缩放模式、对齐、valign 等）。不过，您注意到的是 swf 如何使用容器的宽度来确定其大小，即适合宽度并相应地缩放高度。

于 2012-08-07T06:15:43.393 回答
0

看来您正在寻找的是

width: 100%;
height: auto;

让我知道结果如何。

-布赖恩

于 2012-08-06T16:09:50.223 回答