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 に答える