变换:缩放到全屏?
大家好,
一系列不同大小图像均单独包装在水平滚动网页上的左侧浮动不同大小 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您是否尝试过进一步简化它?尝试使用一些 java 脚本在单击时为对象分配高度、宽度和 z 索引。
本质上是点击后,写入页面:(或类似的内容)
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)