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

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

这是一个使用略有不同的数字的小提琴,但设置为说明 "与宽度成正比加一些常数值"的想法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;
}