javascript - 在保持宽高比的同时缩放 div 以填满屏幕

Question

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

我需要外部 div(带有 class="page")来扩展或收缩以填充用户的屏幕。我希望 div(显然还有它的子项)的纵横比保持不变。我试过使用 jQuery 插件，如 TextFill , 但没有成功。

我已经用一张图片做了一千次，但这次我有一个 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 vendor 标签。

编辑:

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

编辑2

这是 a link to w3schools一些关于 CSS 2D 转换和其他浏览器前缀的信息，正如你在评论中提到的，写一些东西来检查 width > height 和其他方式，然后基于它进行转换，应该适用于所有浏览器。如果你让它工作，请发布 jsFiddle，我会将它添加到答案中，如果你不让它工作，我很乐意试一试。