我们在使 Flash 文件根据父 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>
最佳答案
我有一个类似的问题，我发现这个页面非常有用: 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/
希望这有帮助。
帕特布里珀索
关于html - 使 Flash 文件缩放到 div 宽度并根据其宽高比保持高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11831379/