这是高层次的问题：我有一个16：9视频的Flash视频播放器.播放器的总高度由视频本身加上一些控件.无论整体玩家的身高如何,控制的高度都是恒定的.所以我想做的是让玩家用CSS进行缩放,使得高度满足等式：
y = rx C,其中x是宽度,r是视频高度与视频宽度的比率,C是控件的恒定高度.
y = rx C,其中x是宽度,r是视频高度与视频宽度的比率,C是控件的恒定高度.
我已经制定了一些在Webkit中工作的东西,但似乎没有其他的东西：
#video-container {
height: 0px;
padding-bottom: 56%; /* proportional scaling */
position:relative;
width: 100%;
}
#video-container object {
height: 100%;
padding-bottom: 50px; /* control height */
position: absolute;
width: 100%;
}
在Webkit中,Flash电影将垂直缩放以填充底部填充区域.不过,在其他浏览器中,底部填充只是空的空间.
是否有一个CSS唯一的解决方案,用于缩放与宽度成正比的元素的高度加上一些常数值？关于SO与比例缩放有很多问题,但常数部分是棘手的部分.
解决方法
Here is a fiddle that uses slightly different numbers,but is set up to illustrate一个“与宽度成正比加一些恒定值”的高度想法.它是基于你的原始想法,调整.在IE8,Chrome,Firefox中似乎测试得很好.
基本上,您需要的代码可能是这样的：
#video-container {
position:relative;
width: 100%;
height: 0px;
padding-bottom: 56%; /* proportional scaling */
padding-top: 50px; /* add constant */
}
#video-container object {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
