带绝对位置的 CSS 缩放答案

【问题标题】：CSS zoom w/absolute position带绝对位置的 CSS 缩放
【发布时间】：2026-02-10 20:05:02
【问题描述】：

我正在尝试在我的网页上创建一种效果，您可以在其中单击缩略图，然后从缩略图中“放大”一个全尺寸的 div。我认为使用 CSS/Jquery 应该相当简单：只需将 div 设置为 position:absolute 并设置 top 和 left 以匹配单击的缩略图，将 zoom 属性设置为适当的低值（例如 .25），然后使用查询动画函数将缩放值设置为 1，并将顶部/左侧值设置为我想要最终图像的位置。这几乎奏效了，但有一个警告：显然缩放 CSS 不仅缩放了 div 的大小（及其内容），还缩放了位置。

所以我的问题（相对）简单：如何定位“全尺寸”div，使其顶部和左侧与缩略图匹配并且缩放参数设置为小于 1？

编辑 1：经过进一步研究，我发现显然 Firefox 根本不支持缩放属性，而且我在其他浏览器中得到的行为太不一致了，所以我改用 CSS 转换/转换。当然，过渡属性在 IE

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这是出乎意料的行为。另一种方法是将缩放后的元素放在另一个元素中，该元素具有绝对位置样式：

$('#content div').animate({
  zoom: 0.2
},2000);

#content {
  position: fixed;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  background: #88e;
  font: 60px verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div>Lorem ipsum</div>
</di>

【讨论】：