【问题标题】：Maintaining aspect ratio on element while not exceeding max width or height of entire page在不超过整个页面的最大宽度或高度的情况下保持元素的纵横比
【发布时间】：2013-09-07 15:55:08
【问题描述】：

这是"Height equal to dynamic width (CSS fluid layout)"的延续。

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

但是，这是针对单个非滚动网页的。因此，我希望元素自动减小元素的宽度，以防 height 太大。

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

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

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

问题：

当元素太高时我需要它（手动编辑 DOM 以获得结果）：

正如您在此处看到的，宽度减小了，这反过来又减小了高度以避免滚动条，同时保持纵横比为 16:9。

See jsfiddle to better understand.

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

【问题讨论】：

标签： javascript html css aspect-ratio

【解决方案1】：

使用视口单位将视频元素的高度尺寸设置为 100% 视口高度减去聊天元素的高度。

Here's a plunkr to demo the code below

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>

【讨论】：

【解决方案2】：

一种解决方案是使用Grid Stylesheets (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 snippet。

【讨论】：

酷，它可以工作，但我做了一些调整来解决滚动条问题：Plunker

See jsfiddle to better understand.

HTML

JavaScript （不太相关，但它会生成播放器）

CSS

JavaScript _{^{（不太相关，但它会生成播放器）}}