css - 变换:scale to fullscreen?

Question

大家好，

一系列不同大小图像均单独包装在水平滚动网页上的左侧 float 不同大小 div 中。我希望能够点击一个 div 将其缩放到全屏(通过添加一个包含缩放指令的 css 类，使用toggleClass)，然后点击图像(现在是全屏，因此遮盖了 div)以返回到正常(通过从其包装 div 中删除该类)。

我找到了各种选项来对背景图像(具有已知大小)执行此操作，并且有不错的全屏画廊，但这个让我回避。

由于尺寸不同，我无法使用scale(2)或其他固定值。是否可以将 webkit-transform:scale 调整为目标尺寸(如 768x1024)而不是比例因子？

非常感谢!

Answer 1

您是否尝试过进一步简化它？尝试使用一些 JavaScript 来为单击时的对象分配高度、宽度和 z 索引。

基本上在点击时，写入页面:(或类似的东西)

height:100%;
width:100%;
z-index:999;
position:absolute;