用 JavaScript 实现网页图片等比例缩放

思路:
高度都控制在160像素以内,如果是160像素以内的话,就直接显示;
如果高度大于宽度,高度优先缩小在160以内,宽度根据高度的缩放比缩小;反之亦然

1.在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小
Javascript代码:


自动缩放后的效果  


 2.


    图片自适应
    
    
    
    
    
    


    




    


        


            图片超出限制尺寸时,自动缩小到指定尺寸范围内,点击后图片后在本页面显示原尺寸图片。


                     οnlοad="adapt(this,300,160,1)" />

    

        


            图片超出限制尺寸时,自动缩小到指定尺寸范围内,点击后图片后在本页面显示原尺寸图片。


                     οnlοad="adapt(this,300,160,0)" />

    

        


            图片超出限制尺寸时,自动缩小到指定尺寸范围内,点击后图片后在本页面显示原尺寸图片。


                     οnlοad="adapt(this,300,160,5)" />



3.javascript 根据图片实际比例进行缩放, 并居中显示, 用到jQuery


根据图片实际比例进行缩放


 




    











你可能感兴趣的:(js)