CSS 缩放与绝对位置

CSS zoom w/absolute position

本文关键字：位置 缩放 CSS      更新时间：2023-09-26

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

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

编辑 1：经过进一步的研究，我发现显然 Firefox 根本不支持 zoom 属性，而且我在其他浏览器中的行为太不一致了，所以我改用 CSS 转换/过渡。当然，过渡属性在 IE<10 上不起作用，但许多其他东西也不起作用，所以我可以接受它。

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

$('#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>

相关文章：