div变换后定位内容答案

【问题标题】：positioning content after div transformdiv变换后定位内容
【发布时间】：2013-12-24 00:23:27
【问题描述】：

我在一个 div 中有内容，我试图根据用户的偏好进行缩放。我正在使用Louis Remi's transform.js 来执行此操作。

但是，当我这样做时，它会将内容推到 div 顶部上方（在缩小时截断内容）或在容器下方（在缩小时留下大量空白）。

我想知道是否有任何方法可以推送内容以便将其附加到 div 的顶部？

这是jsfiddle example。现在它的比例为 0.50，显示内容位于屏幕中间，在 div 的顶部和底部留下大量空间。

HTML

<div id="reportContainer">
    <div id="zoomMe">
        <div id="content1" class="fillerBox">&nbsp;</div>
        <div id="content2" class="fillerBox">&nbsp;</div>
        <div id="content3" class="fillerBox">&nbsp;</div>
        <div id="content4" class="fillerBox">&nbsp;</div>
        <div id="content5" class="fillerBox">&nbsp;</div>
    </div>
</div>

CSS

#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }

$(document).ready(function() {
    $("#reportContainer").height($(window).height()-50);
    $("#zoomMe").css('transform', 'scale(.50)' );
});

【问题讨论】：

将其缩放到 1 而不是 0.50
@ani 缩放到 1 是没有缩放的。我正在尝试为用户添加放大/缩小功能。
那么我看到的唯一解决方案是制作 position: absolute 并将其移动到正确的位置 - 对于 #zoomme 元素
@ani 我希望你不会那样说，但我想这还不错。现在我有类似$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' }); 的东西 - 对制作一个随着容器调整大小而缩放的“适合”缩放选项有什么建议吗？
不在我的脑海中。这是一个简单的例子：使用 windowrezise 函数并使用总高度和窗口高度比率计算高度。有意义吗？

标签： javascript jquery transform scale

【解决方案1】：

我的其他问题之一的好人实际上回答了这个问题，但由于有人对我的问题投了赞成票，我想我也会把它放在这里。

有一个很棒的 CSS 选项可以附加转换后的元素。多亏了 stackoverflow'r 的帮助，我最终做到了这一点。

-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;

【讨论】：