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

Answer 2

通过在包含元素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;
}

Answer 3

使用此JQuery代码：

jsFiddle

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

当父div的大小和宽高比约束时，将div调整为最大可能的大小

3 个答案: