我正在制作一个图库，我希望当你点击它时，每张照片都能全屏显示，如下所示：
目前，我在每个图像上都有一个单击处理程序，它会向单击的图像添加一个zoom类。我编写的CSS选择器只会放大图像，而不会像示例中那样将其居中显示在整个页面上。下面是我的代码：第一个如何更改zoom CSS，使图像进入全屏模式？
zoom
ifmq2ha21#
这 是 很 难 做到 这 一 点 与 缩放 - 你 必须 计算 取决 于 当前 视口 等 尺寸 和 重新 定位 图像 。另 一 种 方法 是 让 一 个 元素 充满 整个 windows ， 它 有 一 个 很 高 的 z 轴 ， 但 通常 不 显示 。 当 用户 点击 一 个 图像 时 ， 它 被 设置 为 这个 大 元素 的 背景 ， 背景 大小 包含 它 ， 所以 它 总是 正好 适合 。在 这个 片段 中 ， 点击 放大 的 图像 可以 去掉 它 。第 一 个
htrmnn0y2#
我 建议 看看 intensejs 库 ：https://github.com/tholman/intense-images 的 最 大 值它 的 实施 快速 而 简单 ， 能够 满足 您 的 需求 。
vlurs2pr3#
下面是一个jQuery“一行程序”，它可以使页面上的所有图像都可以点击以全屏显示：$(document).ready(function(){$("img").click(function(){this.requestFullscreen()})});
$(document).ready(function(){$("img").click(function(){this.requestFullscreen()})});
3条答案
按热度按时间ifmq2ha21#
这 是 很 难 做到 这 一 点 与 缩放 - 你 必须 计算 取决 于 当前 视口 等 尺寸 和 重新 定位 图像 。
另 一 种 方法 是 让 一 个 元素 充满 整个 windows ， 它 有 一 个 很 高 的 z 轴 ， 但 通常 不 显示 。 当 用户 点击 一 个 图像 时 ， 它 被 设置 为 这个 大 元素 的 背景 ， 背景 大小 包含 它 ， 所以 它 总是 正好 适合 。
在 这个 片段 中 ， 点击 放大 的 图像 可以 去掉 它 。
第 一 个
htrmnn0y2#
我 建议 看看 intensejs 库 ：https://github.com/tholman/intense-images 的 最 大 值
它 的 实施 快速 而 简单 ， 能够 满足 您 的 需求 。
vlurs2pr3#
下面是一个jQuery“一行程序”，它可以使页面上的所有图像都可以点击以全屏显示：
$(document).ready(function(){$("img").click(function(){this.requestFullscreen()})});