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

Here is a fiddle that uses slightly different numbers, but is set up to illustrate 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;
}

使用CSS缩放与width + constant成比例的对象元素高度

1 个答案: