这是我正在谈论的页面的 JSFiddle：http://jsfiddle.net/nmUuU/
我需要外部 div（带有class="page"）来扩大或缩小以填充用户的屏幕。我希望 div 的纵横比（显然，它的孩子）保持不变。我尝试过使用像TextFill 这样的jQuery 插件，但没有成功。
我已经用一张图片做了一千次，但这次我有一个div，里面有一堆元素。还能做吗？
编辑：似乎我可能没有强调这一点，但我希望 div 的子级也增加大小。它应该看起来好像 div 是刚刚放大的图像；内部的元素应保持彼此之间的关系，同时扩展以填充父级。它应该从看起来像 this 变成看起来像 this（添加边框以指示屏幕边缘）。
虽然纯 CSS 总是很好，但我猜它会涉及一些 Javascript。即使只是几个指针也将不胜感激。
【问题讨论】：
标签： javascript html css layout
我认为目前这不能仅使用 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 设置为适当的值，您可以按照我在上面示例中已经完成的方式进行计算。
编辑2
这里是a link to w3schools，其中包含有关 CSS 2D 转换和其他浏览器前缀的一些信息，正如您在 cmets 中提到的，编写一些检查是否为 width > height 的内容，反之亦然，然后基于此进行转换，应该适用于所有浏览器。如果您能正常工作，请发布 jsFiddle，我会将其添加到答案中，如果您不能正常工作，我很高兴尝试一下。
【讨论】：
width()s 都更改为 height()）。这是一个好的开始，但你知道非 CSS3 的方式吗？连火狐都不支持。
transform，并完全消除了zoom。使用变换具有重新定位元素的有趣效果，需要用边距进行补偿。我认为我的计算有时仍然有点偏差，但我的最新版本是jsfiddle.net/nmUuU/34
0px 0px，则使用 -transform-origin 属性可能更容易解决。
将您的内容包装在另一个 div 中，该 div 将位于主 div（类：页面）内，并使您的所有其他元素定位：相对
<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
只需调整 Window 的大小并使用它...你懂的...
注意：当前溢出的内容是隐藏的，你可以让它滚动，如果你想...
【讨论】：
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;
}
【讨论】：
尝试在 percent 中指定 width 和 height 而不是像素。
.page{
margin: auto;
width: 100%;
height: 100%;
color: black;
background-color: #eee;
text-align: center;
font-family: Raleway, Helvetica, Arial, sans-serif;
}
【讨论】：