2

背景：

我有html：

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

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

问题：

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

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

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

任何帮助将非常感激。

谢谢

4

3 回答 3

1

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

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;
}
于 2013-10-21T17:41:33.103 回答
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);
于 2013-10-21T16:44:51.567 回答
0

使用这个 JQuery 代码：

jsFiddle

var parentw = $("#page").parent().width();
$("#page").height(function(){
    return parentw*9/16;
});
于 2013-10-21T16:52:17.873 回答