css3 - 在手机app端实现点击缩略图展示原图
黄舟
黄舟 2017-04-17 11:44:16
[CSS3讨论组]

原图如何布局才能使其不是真又能正常现实在屏幕中央

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(3)
黄舟

需要取得原图的大小,然后JS通过计算让它在屏幕中央,这里最主要的一点技巧就是要判断是高度优先还是宽度优先,因为有的图是横向的,而你的屏是竖的,这时需要根据宽度来缩放图片,反之应该根据高度来缩放图片。单纯用CSS无法实现不失真且图片不超出屏幕。

PHP中文网

重新弹出一个图片窗口,或者css做效果

伊谢尔伦

干脆这样 点击缩略图之后出现个全屏的盒子,将盒子的背景图片设为该图片,然后用background-size:contain;这个东东,就不用跟楼上说的那样还要判断是高度优先还是宽度优先了。当然了如果还要在展示原图的情况下要能放大缩小原图,就试着改变meta的相关属性,同时把对应的标签设为超出自动显示滚动条。我思路大概就这样了,可以参考下。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号