当受父 div 的大小和纵横比的限制时，将 div 的大小调整为最大可能的大小[重复]答案

【问题标题】：Resize div to largest possible size when constrained by size of parent div and a aspect-ratio [duplicate]当受父 div 的大小和纵横比的限制时，将 div 的大小调整为最大可能的大小[重复]
【发布时间】：2013-10-30 06:33:36
【问题描述】：

背景：

我有 html:

<div id="container">
  <div id="page"></div>
</div>

其中#container 是一个流体元素，其宽度和高度由窗口大小决定。

问题：

我正在尝试以编程方式设置 #page 的高度和宽度，使其占据最大尺寸，同时受到以下因素的限制：

不得大于#container
它必须保持给定的纵横比，例如16:9

我最苦恼的部分是让它填充相对于父 div 的最大尺寸。

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： javascript html css aspect-ratio

【解决方案1】：

您也可以通过在包含元素padding-top: 56.25%; 中设置纵横比来在不使用Javascript 的情况下实现所需的效果。页面元素需要锚定，例如top: 0; right: 0; 并将宽度/高度设置为 100%。这是一个更新的 JSFiddle 供您查看：CLICK HERE

HTML：

<div id="container">
    <div id="page"></div>
</div>

CSS：

#container{
    position: relative;
    padding-top: 56.25%;   /*16:9 aspect ratio*/
    background:#ff0;
}
#page{
    position: absolute;
    width:100%;
    height: 100%;
    top: 0;
    right: 0;
    background:red;
    opacity: 0.5;
}

【讨论】：

【解决方案2】：

我不确定我的实际语法，但这个想法应该可以正常工作。

var container = document.getElementById('container');
var page = document.getElementById('page');

var scale = Math.min(container.width / 16, container.height / 9)

page.width(scale * 16);
page.height(scale * 9);

【讨论】：

谢谢，抱歉，您能解释一下 naturalWidth、naturalHeight 和 innerHeight 应该代表什么。我以为他们只申请图片？
更新它以删除 naturalHeight、naturalWidth。我没有意识到所有图像的比例都是 16:9。
我的错误是我试图在 div 上调用 *.naturalHeight。非常感谢，效果很好！

【解决方案3】：

使用这个 JQuery 代码：

jsFiddle

var parentw = $("#page").parent().width();
$("#page").height(function(){
    return parentw*9/16;
});

【讨论】：

谢谢，我之前尝试过类似的东西，问题是在某些宽度和高度下，它会导致#page 比#container 高我真的需要它同时受到宽度的限制和高度。请参阅this 了解我的意思。