                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS插件开发之LightBox图片画廊(上)

还是不太明白Math.min里的比例关系。。。

如果前两个数都小于一取最小的比例那图片即使不超过视口图片也要被缩小了。。

Chen_dear

2015-07-29

源自：JS插件开发之LightBox图片画廊(上) 3-7

关注问题我要回答

1373

操作

收起

3 回答

一只帅蚂蚁
2015-08-03

给你贴出了三种图片在视口里面出现的情况，第一个为例，下面都差不多。

0 回复有任何疑惑可以回复我~

收起回答

Chen_dear 提问者

非常感谢！

2015-08-03 回复有任何疑惑可以回复我~

一只帅蚂蚁
2015-07-30

如果宽大于视口，那么宽要乘以的系数必须要比视口的宽度/图片的宽度要小才行（因为只有这样才能让图片在视口里），

同理高度的系数也要比视口的高度/图片的高度要小才行

所以符合让图片在视口里的系数要比这两个系数都小才行

所以系数能取的范围是小于 (高度的系数与宽度的系数中的最小值) 并不是一定就是这个最小值

如果这个最小值小于1，我们就用这个最小值，使图片缩放的比例最小，

如果这个值大于1，我们就用1，因为1在这个范围里，并且可以保证图片不变形

所以最后系数的表达式就是，Math.min（窗口宽度/图片宽度，窗口高度/图片高度,1）;

也就是3者中的最小值

0 回复有任何疑惑可以回复我~

收起回答

Chen_dear 提问者

哇哦！感谢老师这么细心回答，老师太负责了，喜欢上你了肿么办（……&偷笑@~@~）大致理解这个逻辑了，但是还有一点点不明白：乘以的系数是小于视口的宽度/图片的宽度还是小于等于如果是小于的话那 Math.min（窗口宽度/图片宽度，窗口高度/图片高度,1）取三个中的最小值得话这个系数应该是等于高度系数或者是宽度系数或者是1吧也不小于他们呀！

2015-08-02 回复有任何疑惑可以回复我~

天真De孩子

这一节课我有一个问题就是$(window).height(); 我好几次获取高度的时候火狐浏览器获取的却是$(document).height(); 一个是浏览器窗口高度，一个是body文档区域高度。火狐这个是bug么之前同事问我我以为是他写错了，后面我有时候也遇到这个问题。360浏览器是正确获取了的。

2015-08-16 回复有任何疑惑可以回复我~

天真De孩子回复天真De孩子

原因找到了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 这个头部问题我晕，用sublime 生成的HTML5文档他是不包含这个头部的！没想到这个在火狐和谷歌下会出错

2015-08-16 回复有任何疑惑可以回复我~