保持swfObject DOM元素的宽高比

时间:2014-06-18 20:52:07

标签: html css flash aspect-ratio

有没有办法将纵横比保持在响应式flash swfObject中?

如果屏幕小于DOM元素,swfObject会自动调整舞台大小以适应屏幕。如果凌乱的Flash文件具有在舞台外不可见的元素(see here),这可能会导致一些视觉问题。 为了避免这种情况,我传递了一个参数比例,其值为exactfit。(read more here

然而现在闪光灯会松开它的纵横比并变得扭曲。如果dom元素保持比率,闪光灯不会扭曲。

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

这是现在的小提琴,(注意它是水平和垂直对齐的,应该保持这种方式):

http://jsfiddle.net/me2loveit2/ejbLp/13/

HTML

<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>

CSS

.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;
}

0 个答案:

没有答案