Html 保持swfObject DOM元素的纵横比

有没有一种方法可以保持响应闪存swfObject中的纵横比

如果屏幕小于DOM元素，SWFOObject会自动调整阶段大小以适合屏幕。如果凌乱的flash文件包含在stage（）之外不可见的元素，这可能会导致一些视觉问题。 为了避免这种情况，我传递了一个值为exactfit的参数刻度。（）

然而，现在闪光灯将失去它的纵横比，变得扭曲。如果dom元素保持这个比率，flash就不会失真

有没有办法使对象元素在dom中保持其纵横比。CSS解决方案会很好

下面是它现在的样子（注意它是水平和垂直对齐的，应该保持这种状态）：

HTML

---

尝试使用vh和vw。我玩了一点，保持了纵横比。这是它的功能，这是对浏览器的支持这看起来很有趣，但我必须支持IE8+，我很好奇，我实现了它，它工作了，引入了一些与对齐有关的新bug。但是比例是固定的！我希望这与IE8兼容。这就是它的外观：我相信这是最简单的方法。其他涉及使用JS/jQuery。[offtopic]不支持IE8。支持旧浏览器是一种返祖现象，现在浏览器是一个全栈软件程序，保持它的最新是用户的责任。例如，像所有其他程序的更新——FileZilla、Sublime、Atom或游戏补丁。想要使用新功能-让用户安装新软件[/offtopic]不幸的是，关于IE8我没有选择。我正在考虑无论如何都要使用它，并为不受支持的浏览器提供一个js回退解决方案。我设法清除了更多的bug：剩下的唯一问题是，当宽度或高度很小时，它仍在查看其纵横比。有什么想法吗？

<div class="overlay">
    <div class="helper1"></div>
    <div class="helper">
        <object class="swf" type="application/x-shockwave-flash" data="http://philipp.werminghausen.us/testing/twincle_test3.swf" id="replace" style="visibility: visible;">
            <param name="usemap" value="#maptest">
            <param name="wmode" value="transparent">
            <param name="scale" value="exactfit">
        </object>
    </div>
</div>

.helper1 {
    height:50%;
    width:100%;
    margin-bottom:-240px;
    min-height: 240px;
}
.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
}
.helper {
    max-width: 550px;
    max-height: 480px;
    height:100%;
    width:100%;
    margin: 0 auto;
}
.swf {
    max-width: 550px;
    max-height: 480px;
    width: 100%;
    height: 100%;
    background-color:black;
}