使用 CSS 缩放对象元素高度与宽度成比例 + 常量

Posted 2023-03-06

【中文标题】使用 CSS 缩放对象元素高度与宽度成比例 + 常量

【英文标题】：Scaling object element height proportional to width + constant with CSS

【发布时间】：2012-12-19 03:19:05

【问题描述】：

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

【问题讨论】：

我认为仅使用 CSS 是不可能的。给我们更多关于你为什么要这样做的具体信息。你想通过这样做来达到什么目的？并且提供您的 html 也会有所帮助。

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

【参考方案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;

【讨论】：

我得到了另一个解决方案，但这要简单得多，谢谢。现在看起来很明显。