Question

这是我正在讨论的页面的JSFiddle：http://jsfiddle.net/nmUuU/

我需要扩展或缩小外部div（用class="page"）来填充用户的屏幕。我希望div（显然，它的孩子）的长宽比保持不变。我尝试过像TextFill这样的jQuery插件，但没有成功。

我已经用图像完成了这一千次，但这次我有一个div里面有一堆元素。它还能完成吗？

编辑：好像我可能没有强调过这一点，但我希望div的孩子们的体型也会增加。它看起来好像div是刚刚放大的图像;里面的元素应该保持彼此的关系，同时扩展以填充父母。它应该从this看起来像this（添加边框以指示屏幕边缘）。

虽然纯CSS总是很好，但我猜它会涉及一些Javascript。即使只是几个指针也会非常感激。

Answer 1

我不认为目前只能使用CSS，因为您需要能够读取某些元素的宽度，目前无法完成。但是既然JS现在对你很好，你可以使用jQuery来做这样的事情：

function zoomit() {
  $("#page1").css('zoom', $(window).width() / $("#page1").width());
}

$(document).ready(zoomit);

$(window).resize(zoomit);

这是 jsFiddle

这是最新版本的 jsFiddle ，它不仅使用zoom而只使用-transform供应商代码。

修改

我刚刚意识到zoom实际上并不适用于Firefox。相反，您可以将-moz-transform: scale(x, y);用于Firefox，并将x和y设置为适当的值，您可以按照我在上面的示例中所做的相同方式进行操作。

<强> EDIT2

这里是a link to w3schools，其中包含有关CSS 2D变换的一些信息以及其他浏览器的前缀，正如您在评论中提到的那样，编写了一些内容，用于检查width > height是否为{{1}}，然后是基础对此进行转换，应该适用于所有浏览器。发布jsFiddle，如果你让它工作，我会把它添加到答案中，如果你不能使它工作，我很高兴能有它。

Answer 2

尝试在百分比中指定width和height，而不是像素。

.page{
    margin: auto;
    width: 100%;
    height: 100%;
    color: black;
    background-color: #eee;
    text-align: center;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}

Answer 3

将您的内容包装在另一个div中，该div位于主div（class：page）中，并使所有其他元素位于：relative

<div class="page">
  <div class="wrapper">
  </div>
</div>

CSS：

.page{
    position:relative;
    padding-bottom:100%;  /*where the magic happens*/
    height:0;             /*where the magic happens*/
    overflow:hidden;
    max-width: 960px;
    width: 100%;
    color: black;
    background-color: #eee;
    text-align: center;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}
.wrapper{
    position:absolute;
    width:100%;
    height:100%;

}

请参阅 FIDDLE

只需调整窗口大小并随意使用它......你明白了......

注意：目前溢出的内容是hidde，如果你想要它可以滚动...

Answer 4

   html, body{
        margin: 0;
        height: 100%;
        background-color: #eee;
    }.page{
        margin: auto;
        width: 960px;
        height: 745px;
        color: black;
        text-align: center;
        font-family: Raleway, Helvetica, Arial, sans-serif;
    }

小提琴：http://jsfiddle.net/nmUuU/14/show/

在保持纵横比的同时缩放div以填充屏幕

4 个答案: