使用CSS缩放对象元素高度与宽度成正比+常量 [英] Scaling object element height proportional to width + constant with CSS

问题描述

这是高水平的问题：我有一个16：9视频的Flash视频播放器。播放器的总高度由视频本身和一些控件占用。控制的高度是恒定的，与整个播放器的高度无关。所以我想做的是使用CSS的播放器缩放，以便高度满足等式：
y = rx + C，其中x是宽度，r是视频高度与视频宽度的比率，C

Here is the issue at a high level: I have a Flash video player for 16:9 video. The total height of the player is taken up by the video itself plus some controls. The height of the controls is constant regardless of the height of the overall player. So what I want to do is have the player scale with CSS so that the height satisfies the equation: y = rx + C, where x is the width, r is the ratio of video height to video width, and C is the constant height of the controls.

我已经编写了一些在Webkit中可用的东西，但似乎没有别的东西：

I've worked out something that works in Webkit, but seemingly nothing else:

#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影片将垂直缩放以填充底部填充区域。在每个其他浏览器中，底部填充只是空格。

In Webkit, the Flash movie will scale vertically to fill the bottom padding area. In every other browser, though, the bottom padding is just empty space.

是否有一个CSS解决方案，用于缩放元素的高度与宽度成比例加上一些常数值？

Is there a CSS-only solution for scaling the height of an element proportional to the width plus some constant value? There are plenty of questions on SO related to proportional scaling, but the constant part is the tricky part.

推荐答案

这是一个小提琴，使用略有不同的数字，但是设置说明一个与宽度加一些常数值成比例的想法为 height 。它是基于你的原创想法，与一个调整。

Here is a fiddle that uses slightly different numbers, but is set up to illustrate a "proportional to width plus some constant value" idea for the height. It is based on your original idea, with a tweak. It seemed to test fine in IE8+, Chrome, Firefox.

基本上，您需要的代码可能是这样：

Essentially, the code you would need is probably this:

#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缩放对象元素高度与宽度成正比+常量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！