保持元素的宽高比，同时不超过整页的最大宽度或高度

时间：2013-09-04 08:21:40

标签： javascript html css aspect-ratio

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

我想最大化视频元素的大小，同时保持视频元素的宽高比，并且我使用上述问题中的大部分答案成功地为宽度做了这样的事情。

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

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

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

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

Enough height, no problems

问题：

Scrollbars are added instead of the element's height getting reduced

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

Width of element reduced in order for height to fit in page

正如您在这里看到的那样，宽度会减小，从而降低高度以避免滚动条，同时保持宽高比为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;
}

2 个答案:

答案 0 :(得分：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;

但是，GSS仅受Firefox 28和Chrome 34或更新版本支持。

要获得完整的解决方案，请查看此Plunker snippet。

答案 1 :(得分：2)

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

Here's a plunkr to demo the code below

＆＃13;
＆＃13; 
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));
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题