使用CSS缩放与宽度+常数成比例的物体元素高度

这是高级别的问题：我有一个适用于16：9视频的Flash视频播放器。播放器的总高度由视频本身加上一些控制。无论整个玩家的身高如何，控件的高度都是恒定的。所以我想要做的是让玩家用CSS进行比例缩放，使高度满足公式： y = rx + C，其中x是宽度，r是视频高度与视频宽度的比值，C是常数控件的高度。使用CSS缩放与宽度+常数成比例的物体元素高度

我已经工作了的东西，在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有很多问题，但不变的部分是棘手的部分。

来源

2013-01-04 alexp

我不认为这是可能只是CSS。给我们更多关于你为什么要这样做的特别信息。你在做什么试图达到什么目的？并提供您的HTML也将有所帮助。 –

如果我不在我的手机上，我会提供一个实际的答案，但是在所有浏览器中都需要JS来完成这项高级工作。您可以直接以这种方式访问CSS属性，并使用有关它们的条件来操作其他属性。 – casraf

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; 
}

来源

2013-01-04 17:35:48 ScottS

我已经得到了另一个解决方案的工作，但这很简单，谢谢。现在似乎很明显。 – alexp

+1，帮了我很多。 – Utopik

使用CSS缩放与宽度+常数成比例的物体元素高度

回答

相关问题