3

これは、 「動的な幅に等しい高さ (CSS 流動レイアウト)」の続きです。

ビデオ要素のアスペクト比を維持しながら、ビデオ要素のサイズを最大化したいのですが、前述の質問のほとんどの回答を使用して幅を拡大することに成功しています。

ただし、これは単一の非スクロール Web ページ用です。したがって、高さが大きすぎる場合に要素の幅を自動的に縮小するようにします。

私は JavaScript/jQuery を使用してこの結果を得ることができますが、純粋な CSS ソリューションが望ましいでしょう。

以下の例では、imgハックを使用してアスペクト比を強制的に維持しています。

高さが十分に高い場合 (幅が適切に機能し、アスペクト比が維持されている場合)、すべてが正常に機能します。

高さは十分、問題なし

問題：

要素の高さが減る代わりにスクロールバーが追加される

要素が高すぎる場合に必要な方法 (結果を取得するために手動で編集された DOM):

高さがページに収まるように、要素の幅が縮小されました

ここでわかるように、幅が縮小され、縦横比を 16:9 に保ちながら、スクロールバーを避けるために高さが縮小されます。

理解を深めるために jsfiddle を参照してください。

HTML

<script src="https://raw.github.com/flowplayer/flash/master/core/src/javascript/flowplayer.js/flowplayer-3.2.12.min.js">
<div class="top">

    <div class="left">
        <div id="chat">
            chat<br>
            chat<br>
            chat<br>
            chat<br>
            chat<br>
            chat<br>
            chat<br>
            chat<br>
            chat
        </div>
    </div>

    <div class="right">
        <img src="#" width="200" height="58">
    </div>

</div>
<div class="video">
    <img class="maintain169aspectratio" src="https://dl.dropboxusercontent.com/u/21688/staticlinked/maintain_aspect_ratio_hack.png" />
    <div id="player"></div>
</div>

JavaScript (あまり関連性はありませんが、プレーヤーを生成します)

$f("player", "flowplayer-3.2.16.swf", {
    clip: {
        provider: 'rtmp',
        live: true,
        url: 'bouvet',
    },
    plugins: {
        rtmp: {
            url: "flowplayer.rtmp-3.2.12.swf",
            netConnectionUrl: '',
            scaling: 'fit',
        }
    }
});

CSS

div.video {
    position: relative;
    margin: 0;
    padding-top: 58px;
}
div.video img.maintain169aspectratio {
    width: 100%;
}
div#player {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

div#chat {
    position: relative;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}
div.top {
    position: relative;
    width: 100%;
    height: 58px;
    margin: 0;
}
div.left {
    display: table-cell;
    width: 100%;
    height: 100%;
}
div.right {
    display: table-cell;
    min-width: 200px;
    vertical-align: top;
    height: 100%;
}
body {
    margin: 0;
}
4

2 に答える 2

2

ビューポート単位を使用して、ビデオ要素の高さの寸法をビューポートの高さの 100% からチャット要素の高さを差し引いた値に設定します。

以下のコードをデモするplunkrがあります

body {
    font-size: 62.5%;
}
.cast {
    display: flex;
    font-size: 1.6rem;
}
.cast-chat {
    flex-grow: 2;
    height: 10rem;
    overflow-y: scroll;
    overflow-x: hidden;
}
.castPlayer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 2;
}

.castPlayer-video {
    background-color: red;
    height: calc(100vh - (11.6rem));
}
<!DOCTYPE html>
<html>

<head>
    <title>Web Cast</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="cast">
        <div class="cast-chat">
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
            <p>chat</p>
        </div>
        <div class="cast-logo">
            <img src="http://placehold.it/100x100" alt="logo">
        </div>
    </div>
    <div class="castPlayer">
        <video class="castPlayer-video"></video>
    </div>
</body>

</html>

于 2014-09-22T21:21:42.540 に答える