Question

我有一个div（#outer），它位于Web浏览器的左中部分（Chromium）。当窗口调整大小时，它的宽度可以改变。外部div有另一个div，我希望以固定的宽高比（16：9）调整大小，同时始终保持在外部div的范围内。

例如，如果外部div调整为高而薄，则内部div应该适合外部div的整个宽度，同时保持比例高度。如果外部div调整为短和宽，则内部div应该与比例宽度的外部div的整个高度相匹配。内部div不应该伸展到外部div的边界之外，并且不应该有滚动条。

基本上，我希望完成所谓的here，但包含在另一个动态变化的div 中，而不仅仅是视口。我尝试使用视口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：

使用before元素：

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

Answer 1

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

这是使用js的解决方案：

( ... ; node ; ...)

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

Here a jsfiddle to play with

我希望这可以帮到你

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

<强>更新

由于你需要它以一定的大小停止（因为外部区域的高度是固定的）并且没有变得更大，你需要确定你需要它停止的高度...然后制作{{我在我的示例中创建的1}}停留在#outer-wrapper和max-width。我已经更新了Code Pen以便这样工作：

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

更新2 我已将上述CodePen（here）更新为更像您的布局。这就是我可以帮助你的方式。我的意见是避免绝对，除非绝对没有办法可以避免它们......他们不尊重其他标签的位置......所以我所做的主要是创建你的例子的布局而没有绝对的东西除了相机视图部分以外的位置。

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

保持div宽高比在另一个div内

2 个答案: