使用CSS按比例调整对象元素的高度与宽度+常数

5 浏览
0 Comments

使用CSS按比例调整对象元素的高度与宽度+常数

问题在于：我有一个用于16:9视频的Flash视频播放器。播放器的总高度由视频本身和一些控件占据。控件的高度与播放器的总高度无关。所以我希望使用CSS对播放器进行缩放，使得高度满足以下方程：y = rx + C，其中x是宽度，r是视频高度与视频宽度的比率，C是控件的固定高度。

我在Webkit中找到了一个可行的解决方案，但似乎在其他浏览器中无效：

#video-container {

height: 0px;

padding-bottom: 56%; /* 等比例缩放 */

position:relative;

width: 100%;

}

#video-container object {

height: 100%;

padding-bottom: 50px; /* 控件高度 */

position: absolute;

width: 100%;

}

在Webkit中，Flash电影会垂直缩放以填充底部填充区域。然而，在其他浏览器中，底部填充区域只是空白。

是否有CSS的解决方案可以使元素的高度与宽度成比例地缩放，加上一些常量值？在SO上有很多与等比例缩放相关的问题，但常量部分是棘手的部分。

0

1 答案

0 Comments

问题的出现原因：原文提到作者在解决一个关于元素高度比例与宽度加上某个常数值的问题时，使用了一种方法，但没有详细说明具体的实现过程。

解决方法：作者提供了一个jsfiddle链接，展示了一个使用CSS实现“高度与宽度成比例加上某个常数值”的方法。作者使用了一段CSS代码，其中包括两个选择器：#video-container和#video-container object。#video-container选择器用于设置容器的样式，#video-container object选择器用于设置嵌入对象的样式。

具体的CSS代码如下：

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

这段代码中，#video-container的样式设置了相对定位、宽度为100%、高度为0px，并使用padding-bottom属性实现了高度与宽度成比例的效果，同时使用padding-top属性添加了一个常数值。#video-container object的样式设置了绝对定位、宽度和高度都为100%，top属性为0，用于嵌入对象。

作者还提到之前尝试过另一种解决方法，但现在使用的这个方法更加简单和直观。

0