3

这是“高度等于动态宽度（CSS 流体布局）”的延续。

我想最大化视频元素的大小，同时保持它的纵横比，并且我成功地使用上述问题中的大多数答案来实现宽度。

但是，这是针对单个非滚动网页的。因此，我希望元素在高度太大的情况下自动减小元素的宽度。

我愿意使用 JavaScript/jQuery 来获得这个结果，但最好使用纯 CSS 解决方案。

在下面的示例中，我使用imghack 来强制保持纵横比。

如果高度足够高，一切正常（宽度正常，并保持纵横比）：

够高，没问题

问题：

添加滚动条而不是减少元素的高度

当元素太高时我需要它（手动编辑 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

一种解决方案是使用网格样式表(GSS)。

以下 HTML：

<body>
    <div id="chat">
        Chat
    </div>
    <div id="preview">
        Preview
    </div>
    <div id="video">
        Video
    </div>
</body>

可以使用 GSS 进行样式设置，如下所示：

@horizontal |[#chat][#preview]| in(body);
@vertical |[#chat][#video]| in(body);

#chat[width] == ::window[width] * 0.5;
#preview[width] == ::window[width] * 0.5;

#chat[height] == #preview[height];
#chat[height] == 100;

#video[center-x] == ::window[center-x];
#video[width] <= ::window[width];
#video[width] == #video[height] * 1.6;
#video[height] == ::window[height] - 100;

但是，只有 Firefox 28 和 Chrome 34 或更高版本支持 GSS。

有关完整的解决方案，请查看此Plunker 片段。

于 2014-09-22T12:39:27.263 回答
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 回答