PhotoSwipe 自适应高度

最新推荐文章于 2025-06-01 09:06:08 发布

原创

最新推荐文章于 2025-06-01 09:06:08 发布 · 4.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#photoswiper #图片预览 #图片点击放大 #仿微信图片预览

本文介绍了如何在仿微信图片预览中使用Photoswipe插件，克服了data-size固定宽高比的问题，实现了在iOS和Android设备上的兼容性。通过文中方法，可以实现点击图片放大并流畅滑动的体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做仿微信的图片预览，点击图片放大，并左右滑动，使用的Photoswiper插件，插件很好用，流畅度什么的都很好，就是一个data-size固定宽高比很恶心，看了很多资料，都没有解决，在快放弃这个插件的时候找到了解决方法，

for(var i = 0; i < numNodes; i++) {

                    figureEl = thumbElements[i]; // <figure> element

                    // include only element nodes
                    if(figureEl.nodeType !== 1) {
                        continue;
                    }

                    linkEl = figureEl.children[0]; // <a> element
                    var img = new Image();
                    img.src = linkEl.getAttribute('href');

                    linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);

                    size = linkEl.getAttribute('data-size').split('x');


                    // create slide object
                    item = {
                        src: linkEl.getAttribute('href'),
                        w: