4

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

我需要外部 div（带有class="page"）来扩大或缩小以填充用户的屏幕。我希望 div 的纵横比（显然，它的孩子）保持不变。我尝试过使用 TextFill 之类的 jQuery 插件，但没有成功。

我已经用一张图片做了一千次，但这次我有一个div里面有一堆元素。还能做吗？

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

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

4

4 回答 4

4

我不认为目前只能使用 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

这是w3schools 的链接，其中包含有关 CSS 2D 转换和其他浏览器前缀的一些信息，正如您在评论中提到的那样，编写一些检查是否存在的东西，反之亦然width > height，然后以此为基础进行转换，应该可以解决问题适用于所有浏览器。如果您可以正常工作，请发布 jsFiddle，我会将其添加到答案中，如果您不能正常工作，我很高兴尝试一下。

于 2013-05-21T06:16:31.073 回答
0

将您的内容包装在另一个 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%;
    
}

见 小提琴

只需调整窗口大小并玩弄它......你明白了......

注意：当前溢出的内容是隐藏的，如果你愿意，你可以让它滚动......

于 2013-05-21T04:44:58.120 回答
0 
   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/

于 2013-05-21T05:54:35.317 回答
-1

尝试以百分比而不是像素 指定widthand 。height

.page{
    margin: auto;
    width: 100%;
    height: 100%;
    color: black;
    background-color: #eee;
    text-align: center;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}
于 2013-05-21T04:42:49.897 回答