Javascript 将div纵横比保持在另一个div内我有一个div（外层）放置在Web浏览器的左边（China）的中间部分。它的宽度可以随着窗口大小的改变而改变。外部div内部有另一个div，我想用固定的纵横比（16:9）调整它的大小，同时始终保持在外部div的边界内_Javascript_Jquery_Html_Css

Javascript 将div纵横比保持在另一个div内我有一个div（外层）放置在Web浏览器的左边（China）的中间部分。它的宽度可以随着窗口大小的改变而改变。外部div内部有另一个div，我想用固定的纵横比（16:9）调整它的大小，同时始终保持在外部div的边界内

javascript jquery html css

Javascript 将div纵横比保持在另一个div内我有一个div（外层）放置在Web浏览器的左边（China）的中间部分。它的宽度可以随着窗口大小的改变而改变。外部div内部有另一个div，我想用固定的纵横比（16:9）调整它的大小，同时始终保持在外部div的边界内,javascript,jquery,html,css,Javascript,Jquery,Html,Css,例如，如果外部div的大小调整为“高”和“薄”，则内部div应适合外部div的全宽，同时保持比例高度。如果外部div的大小调整为短而宽，则内部div应与外部div的全高相匹配，并具有比例宽度。内部div不应该超出外部div的边界，也不应该有滚动条本质上，我想完成所要求的，但包含在另一个动态变化的div中的内容，而不仅仅是视口。我尝试使用viewport vw和vh，但在一个div内无法使用它。我目前使用的是带有padding top的before元素：56.25%，它仅适用于外部div的宽度，

例如，如果外部div的大小调整为“高”和“薄”，则内部div应适合外部div的全宽，同时保持比例高度。如果外部div的大小调整为短而宽，则内部div应与外部div的全高相匹配，并具有比例宽度。内部div不应该超出外部div的边界，也不应该有滚动条

本质上，我想完成所要求的，但包含在另一个动态变化的div中的内容，而不仅仅是视口。我尝试使用viewport vw和vh，但在一个div内无法使用它。我目前使用的是带有padding top的before元素：56.25%，它仅适用于外部div的宽度，如果宽度远大于高度，则会溢出外部div

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

相关HTML:

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

使用视口单位：（编辑：将其作为单独的测试文件）

我知道你真的想要一个纯CSS解决方案，我真的希望有人能给你一个CSS解决方案，最大的问题是根据父母的身高设置宽度，请看我的问题

这里有一个使用js的解决方案：

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

函数setAspectRatio（）{
外部变量=$（“#外部”）；
变量框=$（'.box'）；
如果（外部高度（）>外部宽度（）*0.5625）{
css（{'width'：'100%}）；
css（{'height'：box.width（）*0.5625}）；
}否则{
css（{'height'：'100%}）；
css（{'width'：box.height（）/0.5625}）；
}
}
$（文档）.ready（函数（）{
setAspectRatio（）；
$（窗口）。调整大小（函数（）{
setAspectRatio（）；
})
})

.box{
位置：相对位置；
背景：#A2E8A7；
保证金：0px自动；
}
.方框内容{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
#外{
显示器：flex；
位置：相对位置；
宽度：100%；
高度：60vh；
对齐项目：居中；
}

我试图重新创建您的布局，您说它在侧面，当它收缩太多时，它会溢出。我无法重现那种效果。通过这里的链接，我可以说，我可以让事情顺利进行。如果下面的方法不起作用，你能做一次引导，或者尝试重现问题吗

对于下面的内容

    <!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>


html，正文{
身高：100%；
宽度：100%；
位置：相对位置；
}
#容器{宽度：100%；高度：100%；最小宽度：480px；}
#外包装{
宽度：100%；
身高：100%；
保证金：0自动；
}
#外{
位置：相对位置；
宽度：100%；
对齐项目：居中；
背景：黑色；
垫底：56.25%；
保证金：0自动；
}
.盒子{
位置：绝对位置；
顶部：0；底部：0；左侧：0；右侧：0；
背景#83E1D1；
}
#顶栏{高度：26px；背景色：#600；}
#底部栏{高度：20px；背景色：#006；}
#内容包装器{
宽度：100%；高度：100%；
}
#内容左{
宽度：自动；
右边距：280px；
}
#信息{背景色：006；颜色：白色；}
#内容(右){
浮动：对；
宽度：280px；
身高：100%；
背景：#d43b89；
}
#底线{
位置：固定；底部：0；左侧：0；右侧：0；高度：20px；背景：#000；
}
你好，世界
摄像机视图下方的信息

更新

因为你需要它停在一个特定的大小（因为外部区域的高度是固定的），而不是变得更大，你需要确定你需要它停在什么高度…然后让我在我的示例中创建的

#外部包装

停在

最大宽度

和

最大高度

。我已将代码笔更新为以下方式：

更新2我已将上述代码笔（）更新为更像您的布局。这是我能帮助你的最大限度了。我的意见是避免绝对的，除非你绝对没有办法避免它们…它们不尊重其他标签的位置…所以我所做的主要是创建你的例子的布局，没有任何绝对的位置，除了相机视图部分

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

哪个div应该保持16:9的纵横比

#box

？在“使用before元素”中，“outer”的高度应该是多少？泰勒-是的，“box”应该保持16:9的比例。YandY-outer的高度应该是它的父元素的高度

    <!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>