13

这是一个高层次的问题：我有一个用于 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 有很多与比例缩放相关的问题，但常数部分是棘手的部分。

4

1 回答 1

19

这是一个使用稍微不同的数字的小提琴，但设置是为了说明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;
}
于 2013-01-04T17:35:48.580 回答