按比例缩放div以填充屏幕

Question

这是我要谈论的页面的JSFiddle链接：http://jsfiddle.net/nmUuU/ 我需要外部 class="page" 的 div 标签来扩展或缩小以填充用户的屏幕。我希望 div （显然，它的子元素）的纵横比保持不变。我尝试过像 TextFill 这样的 jQuery 插件，但没有成功。

我用图像做了这个操作一千次，但这次我有一个包含许多元素的 div。仍然可以做到吗？

编辑：看起来我可能没有强调这一点，但我希望 div 的子元素也随之增大。它应该看起来像一个被缩放的图像；里面的元素应该保持彼此的关系，同时扩展以填充父级。它应该从像这样的样子变成这样的样子（添加边框以指示屏幕边缘）。

虽然纯 CSS 总是很好，但我想它可能涉及一些 Javascript。即使只有几个提示也将不胜感激。

- Dan Hlavenka

---

为什么不使用媒体查询？ - The Mechanic

Answer 1

我认为目前无法仅使用CSS完成此操作，因为您需要能够读取某些元素的宽度，目前无法实现。但是既然您现在可以使用JS，您可以使用jQuery执行以下操作：

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

$(document).ready(zoomit);

$(window).resize(zoomit);

这里有一个jsFiddle

这里有一个jsFiddle，它是最新版本，仅使用-transform供应商标签而不使用zoom。

编辑：

我刚刚意识到zoom实际上在Firefox上不起作用。相反，您可以使用-moz-transform: scale(x, y);来代替Firefox，并将x和y设置为适当的值，您可以按照我在上面的示例中已经完成的方式计算出这些值。

编辑2：

这里有一个w3schools的链接，其中包含关于CSS 2D转换以及其他浏览器的前缀信息。正如你在评论中提到的那样，编写一个检查宽度>高度和另一种情况的代码，并基于此进行转换，应该可以解决所有浏览器的问题。如果你成功了，请发布jsFiddle并将其添加到答案中。如果你无法成功，我很乐意尝试帮助你。

- Mathijs Flietstra

---

你的代码有时会根据窗口大小而崩溃（当宽度 > 高度时，我需要将两个 width() 改为 height()）。这是一个好的开始，但你知道一种非 CSS3 的方法吗？即使火狐浏览器也不支持它。 - Dan Hlavenka

http://jsfiddle.net/nmUuU/21/show/ 大约有90%的功能正常。在我尝试过的所有“正常”分辨率下，它看起来都很好，但当窗口大约是正方形且宽度约为1000像素时，它会以一种我无法通过编程检测到的奇怪方式变化。 - Dan Hlavenka

我更新了我的解决方案，完全使用带有供应商标签的 transform，并完全消除了 zoom。使用 transform 产生了重新定位元素的有趣效果，需要通过边距进行补偿。我认为我的计算有时仍然有点偏差，但我最新的版本是 http://jsfiddle.net/nmUuU/34/。 - Dan Hlavenka

我已经将它添加到答案中了，关于边距的问题，如果你将-transform-origin属性设置为0px 0px，可能会更容易解决。 - Mathijs Flietstra

Answer 2

将您的内容包装在另一个 div 中，该 div 将位于主 div（class:page）内部，并使所有其他元素 position: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

只需调整窗口大小并进行操作...您就会明白...

注意：当前溢出的内容被隐藏，如果需要，可以使其滚动...

- DextrousDave

---

你的示例似乎将外部div的高度调整为屏幕的两倍：http://i.imgur.com/QADYc4u.jpg（注意滚动条）。 - Dan Hlavenka

Answer 3

   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/

- Avin Varghese

---

这不会改变任何内部元素的大小。请参见更新的问题以获得澄清。 - Dan Hlavenka

Answer 4

尝试使用百分比而不是像素来指定宽度和高度。

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

- Praveen

---

这将如何保持纵横比或缩放任何内部元素？ - Dan Hlavenka