缩放对象元素的高度成比例的宽度+常数与CSS

Question

这是一个高层次的问题:我有一个16:9视频的Flash视频播放器。播放器的总高度由视频本身加上一些控制来决定。无论玩家的整体高度如何，控制的高度都是恒定的。所以我要做的是用CSS来设置玩家的比例，这样玩家的高度就能满足下面的等式: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有很多与比例缩放相关的问题，但常数部分是棘手的部分。

Answer 1

这是一个使用稍微不同的数字的fiddle，但它的设置是为了说明height的"与宽度成正比加上一些恒定值"的想法。这是基于你最初的想法，稍作调整。它在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;
}