变换:缩放到全屏?

发布于 2024-09-28 22:52:52 字数 359 浏览 8 评论 0原文

大家好,

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

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

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

非常感谢!

Good day all,

A series of differently sized images are each individually wrapped in left floating differently sized divs on a horizontally scrolling web page. I want to be able to tap on a div to scale it to fullscreen, (by adding a css class containing the scale instruction, with toggleClass), and tap on the image (which is now fullscreen and thus obscures the div) to return to normal (by removing the class from its wrapping div).

I have found various options to do this for a background image (with a known size) and there are nice fullscreen galleries, but this one evades me.

Because of the different sizes, I cannot use scale(2) or some other fixed value. It is at all possible to webkit-transform:scale to a destination size like 768x1024 rather than a scale factor?

Many thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

习惯成性 2024-10-05 22:52:52

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

本质上是点击后,写入页面:(或类似的内容)

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

Have you tried simplifying it a bit more? Try using some java-script to assign a height, width, and z-index to the object on click.

Essentially on click, write to the page: (or something similar)

height:100%;
width:100%;
z-index:999;
position:absolute;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文