jq获取图片的原始尺寸，自适应布局
Posted 梦幻飞雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq获取图片的原始尺寸，自适应布局相关的知识，希望对你有一定的参考价值。
原理： each（）遍历，width（）、height（）获取宽高， load（）
根据图片初始比例和图片容器的宽高比例做自适应（全部铺满容器）
注意：
由于页面加载完了，但图片不一定加载完了，所以直接通过 $("img").width()，$("img").height() 是无法稳定获取到img的准确尺寸，或为0，或偶尔为0；
解决方法： load（），元素加载完了之后执行；
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片自适应</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src=\'./js/jquery-1.9.0.min.js\'></script> <style> * { margin: 0; padding: 0; } img { display: inline-block; } .autoImg { width: 50px; height: 50px; position: relative; overflow: hidden; float: left; margin: 3px; } /*固定宽 高自适应 全铺满*/ .auto_img_Width { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } /*固定高 宽自适应 全铺满*/ .auto_img_Height { position: absolute; top: 0; left: 50%; width: auto; height: 100%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); } </style> </head> <body> <div class="autoImg"> <img src="./img/girl_pic@2x.png" alt="" class=\'auto_img\'> </div> <div class="autoImg"> <img src="./img/bg.jpg" alt="" class=\'auto_img\'> </div> <div class="autoImg"> <img src="./img/img3.png" alt="" class=\'auto_img\'> </div> <div class="autoImg"> <img src="./img/girl_pic@2x.png" alt="" class=\'auto_img\'> </div> <div class="autoImg"> <img src="./img/img2.png" alt="" class=\'auto_img\'> </div> <div class="autoImg"> <img src="./img/img4.png" alt="" class=\'auto_img\'> </div> </body> <script> $(function () { $(\'.auto_img\').each(function (index) { var ind = index; $(this).load(function () { var ratioT = $(this).width()/$(this).height(); //初始图片的宽高比 var ratioP = $(this).parent().width()/$(this).parent().height(); //图片容器的宽高比 console.log(\'父元素：\'+ \'宽高比：\' + ratioP + \' 宽:\'+$(this).parent().width() +\' 高:\'+ $(this).parent().height()+ \' 索引:\'+ ind); console.log( \'初始图片：\'+ \'宽高比：\' + ratioT + \' 宽:\'+$(this).width() +\' 高:\'+ $(this).height()+ \' 索引:\'+ ind); if ( ratioT <= ratioP ) { $(this).addClass(\'auto_img_Width\'); } else { $(this).addClass(\'auto_img_Height\'); } }) }) }) </script> </html>
图片原始图： 
效果图： 
缺点： 丢失了图片的部分边角； 优点： 保持了图片的比例，不变形
以上是关于jq获取图片的原始尺寸，自适应布局的主要内容，如果未能解决你的问题，请参考以下文章