这是 "Height equal to dynamic width (CSS fluid layout)" 的延续.
我想最大化视频元素的大小，同时保持它的纵横比，并且我使用上述问题中的大部分答案成功地实现了宽度。
但是，这是针对单个非滚动网页的。因此，我希望元素在 高度 太大的情况下自动减小元素的宽度。
我愿意使用 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;
}
最佳答案
一种解决方案是使用 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 .
关于javascript - 在不超过整个页面的最大宽度或高度的情况下保持元素的纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18608804/