javascript - 在另一个 div 中保持 div 纵横比

Question

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

例如，如果外部 div 调整为高和瘦，则内部 div 应适合外部 div 的整个宽度，同时保持比例高度。如果外部 div 调整为短而宽，则内部 div 应适合外部 div 的整个高度并按比例宽度。内部 div 不应该延伸到外部 div 的边界之外，也不应该有滚动条。

本质上，我想完成要求的事情 here ，但包含在另一个动态变化的 div 中，而不仅仅是视口(viewport)。我尝试使用视口(viewport) 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;
}

使用视口(viewport)单位:(编辑:这是一个单独的测试文件)

.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解决:

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

希望对你有帮助