有没有办法将纵横比保持在响应式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;
}