css - 转换：缩放到全屏？

Question

大家好，

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

我已经找到了各种选项来为背景图像（具有已知大小）执行此操作，并且有很好的全屏画廊，但这个回避了我。

由于尺寸不同，我不能使用 scale(2) 或其他一些固定值。完全有可能将 webkit-transform:scale 缩放到像 768x1024 这样的目标大小而不是比例因子？

非常感谢！

Answer 1

您是否尝试过进一步简化它？尝试使用一些 java 脚本在单击时为对象分配高度、宽度和 z-index。

基本上在点击时，写入页面：（或类似的东西）

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