将 div 纵横比保持在另一个 div 中答案

【问题标题】：Keep div aspect ratio within another div将 div 纵横比保持在另一个 div 中
【发布时间】：2015-07-06 19:08:03
【问题描述】：

我有一个 div (#outer)，它位于网络浏览器 (Chromium) 的左中部分。它的宽度可以随着窗口大小的变化而变化。外部 div 内部有另一个 div，我想以固定的纵横比 (16:9) 调整其大小，同时始终保持在外部 div 的范围内。

例如，如果外部 div 调整为高和瘦，则内部 div 应适合外部 div 的整个宽度，同时保持成比例的高度。如果外部 div 调整为短和宽，则内部 div 应适合外部 div 的全高和成比例的宽度。内部 div 不应超出外部 div 的范围，也不应有滚动条。

基本上，我想完成here 的要求，但包含在另一个动态变化的 div 中，而不仅仅是视口。我尝试使用视口 vw 和 vh，但还没有让它在 div 中工作。我目前正在使用带有 padding-top: 56.25% 的 before 元素，它仅适用于外部 div 的宽度，如果宽度远大于高度，则会溢出外部 div。

理想情况下，我想使用纯 CSS，但如果没有其他选择，我愿意编写 javascript。有任何想法吗？谢谢！

相关 HTML：

<div id="outer">
    <div class="box"><div id="camera_view"></div></div>
</div>

相关 CSS：

使用前元素：

.box {
    position:relative;
    width: 100%;
    height: 100%;
}

.box:before {
    content: "";
    display: block;
    padding-top: 56.25%;
    background: #A2E8A7;
}

.box-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#outer {
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;
}

使用视口单位：（编辑：这是一个单独的测试文件）

.box {
    width: 100vw; 
    height: 56.25vw;
    background: #FF8AB1;
    max-height: 100vh;
    max-width: 177.78vh;
    margin: auto;
    position: absolute;
    left:0;right:0;
}

#outer {
    width: 50%; 
    height: 50%;
    /* edit: 50% only used to mimic the approximate size of #outer */
}

.box-content {
    background: #FF8AB1;
}

【问题讨论】：

哪个 div 应该保持 16:9 的纵横比？ #box?
在“使用前元素”中，#outer 的高度应该是多少？
Tyler - 是的，#box 应该保持 16:9 的比例。
YandY - #outer 的高度将是其父级的高度（未显示），但 #outer 约为窗口高度的 60%
维持比率stackoverflow.com/questions/1495407/…

标签： javascript jquery html css

【解决方案1】：

我知道你真的想要一个纯 CSS 解决方案，我真的希望有人给你一个 css 解决方案，最大的问题是在父级高度的函数中设置宽度，请参阅我的问题Setting the width depending on the height of its parent。

这里使用js的解决方案：

function setAspectRatio(){
    var outer = $('#outer');
    var box = $('.box');

    if (outer.height() > outer.width() * 0.5625) {
        box.css({'width': '100%'});
        box.css({'height': box.width() * 0.5625});

    } else {
        box.css({'height': '100%'});
        box.css({'width': box.height() / 0.5625});
    }
}

$(document).ready(function() {
    setAspectRatio();

    $(window).resize(function() {
        setAspectRatio();
    })
})

.box {
    position:relative;
    background: #A2E8A7;
    margin: 0px auto;
}
.box-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#outer {
    display: flex;
    position: relative;
    width: 100%;
    height: 60vh;
    align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
    <div class="box">
        <div id="camera_view"></div>
    </div>
</div>

Here a jsfiddle to play with

希望对你有帮助

【讨论】：

感谢您的样品！从小提琴来看，它看起来像我想要重新创建的。我将在我的代码中对此进行测试，并让您知道我是否可以正常工作。
是的，这很好地融入了我当前的代码中。谢谢！我还在研究纯 CSS 解决方案。
@Valka 很高兴为您提供帮助，如果您找到纯 css 解决方案，如果您告诉我，我将不胜感激:)

【解决方案2】：

我正在尝试重新创建你的布局，你说你把它放在一边，当它缩小太多时，它就会溢出。我无法重现那种效果。使用此处的链接：Maintain the aspect ratio of a div with CSS，据我所知，我能够让事情正常工作。如果下面的方法不起作用，你可以做一个 bootply 或 dabblet 来重现问题吗？？？

Here's a CodePen link 用于以下内容。

    <!doctype html>
<html>
    <head>
        <style type='text/css'>

            html, body {
                height: 100%;
                width: 100%;
                position: relative;
            }
            #container { width:100%;height:100%;min-width:480px; }
            #outer_wrapper {
              width:100%;
              height:100%;
              margin:0 auto;
            }
            #outer {
                position: relative;
                width: 100%;
                align-items: center;
                background: black;
                padding-bottom: 56.25%;
                margin: 0 auto;
            }
            .box {
                position: absolute;
                top: 0; bottom: 0; left: 0; right: 0;
                background: #83E1D1;
            }
            #topbar { height:26px;background-color:#600; }
            #bottombar { height:20px;background-color:#006; }
            #content_wrapper {
                width:100%;height:100%;
            }
            #content_left {
                width:auto;
                margin-right:280px;
            }
            #info { background-color:#006;color:white;}
            #content_right {
                float:right;
                width: 280px;
                height:100%;
                background: #d43b89;
            }
            #bottombar {
                position:fixed;bottom:0;left:0;right:0;height:20px;background:#000;
            }
        </style>

    </head>
    <body>
        <div id="container">

            <div id="topbar">
                <div id="title"><a href="/">Lorem Ipsum</a></div>
            </div>

            <div id="content_wrapper">
                <div id="content_right">
                    &nbsp;
                </div>
                <div id="content_left">
                    <div id='outer_wrapper'>
                        <div id='outer'>
                            <div class='box'>
                                <div id="camera_view">Hello World</div>
                            </div>
                        </div>
                    </div>
                    <div id='info'>Info below camera view</div>
                </div>
            </div>

            <div id="bottombar">
            </div>

        </div>

    </body>
</html>

更新

由于您需要它在某个尺寸处停止（因为外部区域的高度是固定的）并且不会变得更大，因此您需要确定您需要它停止的高度......然后制作@987654328我在我的示例中创建的 @ 停止在 max-width 和 max-height。我已将 Code Pen 更新为以这种方式工作：

http://codepen.io/anon/pen/XbEebm

更新 2 我已经更新了上面的 CodePen (here)，使其更像您的布局。这是我能帮助你的最大程度。我的意见是避免绝对，除非绝对没有办法可以避免它们......他们不尊重其他标签的位置......所以我所做的主要是创建你的例子的布局，没有任何绝对定位除了相机视图部分。

您可能还注意到我在#container 上放置了一个最小宽度，以防止 16/9 变得太小...您可能想要稍微更改最小宽度，但您可能需要一个来防止当它变得太小时从该区域内溢出。

【讨论】：

外层div的溢出来自外层div的宽度为x，但外层div的高度小于9x/16。因此，内部 div 的高度是 9x/16，大于内部 div 所需的最大高度。编辑：哎呀，按回车太快了。使用您的示例，我注意到外部 div 的高度随着我水平扩展窗口而增加。外部 div 的高度应该是恒定的。
@Valka，底部添加了新的代码笔。如果这仍然不起作用，您确实需要自己创建一个代码笔。分叉我的或创建你自己的以重现问题......否则，我在黑暗中射击，以了解实际问题是什么。一个人们可以分叉、调整和修复的 CodePen 示例将我们的时间投资减少到几分钟，并且使您更有可能在不浪费大量时间的情况下为您的问题找到好的答案。
感谢您的修改。从您更新的 CodePen 示例中，它的行为如我所愿。我已将您的示例合并到我的测试代码中，但仍在解决一些问题。内部
不会停在某个高度（在我的高度），所以我将尝试向您展示我所写的内容。 jsfiddle 适合你吗？
这是布局的骨架。蓝色框是保持 16:9 比例的地方，它应该刚好接触到它下面的黄色条。我似乎无法让盒子留在原处。（虽然我没有硬编码外部
的高度）jsfiddle.net/valka/6wrk4xp3/6
@Valka，更新了我的 CodePen 以匹配您的布局：codepen.io/anon/pen/XbEebm