javascript - 当受父级 div 大小和宽高比限制时，将 div 大小调整为最大可能大小

Question

背景:

我有 html:

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

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

问题:

我想做的是以编程方式设置 #page 的高度和宽度因此它占据了它能占据的最大尺寸，同时受到以下限制:

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

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

任何帮助将不胜感激。

谢谢

Answer 1

我不确定我的实际语法，但这个想法应该很好。

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