原理： each（）遍历，width（）、height（）获取宽高， load（）

　　　根据图片初始比例和图片容器的宽高比例做自适应（全部铺满容器）

注意：

　　由于页面加载完了，但图片不一定加载完了，所以直接通过 $("img").width()，$("img").height() 是无法稳定获取到img的准确尺寸，或为0，或偶尔为0；

解决方法： load（），元素加载完了之后执行；

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>图片自适应</title>
  6. 	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7. 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. 	<script src='./js/jquery-1.9.0.min.js'></script>
  9. 	<style>
  10. 		* {
  11. 			margin: 0;
  12. 			padding: 0;
  13. 		}
  14. 		img {
  15. 			display: inline-block;
  16. 		}
  17. 		.autoImg {
  18. 			width: 50px;
  19. 			height: 50px;
  20. 			position: relative;
  21. 			overflow: hidden;
  22. 			float: left;
  23. 			margin: 3px;
  24. 		}
  25. 		/*固定宽 高自适应 全铺满*/
  26. 		.auto_img_Width {
  27. 			position: absolute;
  28. 			top: 50%;
  29. 			left: 0;
  30. 			width: 100%;
  31. 			height: auto;
  32. 			transform: translateY(-50%);
  33. 			-webkit-transform: translateY(-50%);
  34. 			-moz-transform: translateY(-50%);
  35. 			-ms-transform: translateY(-50%);
  36. 		}
  37. 		/*固定高 宽自适应 全铺满*/
  38. 		.auto_img_Height {
  39. 			position: absolute;
  40. 			top: 0;
  41. 			left: 50%;
  42. 			width: auto;
  43. 			height: 100%;
  44. 			transform: translateX(-50%);
  45. 			-webkit-transform: translateX(-50%);
  46. 			-moz-transform: translateX(-50%);
  47. 			-ms-transform: translateX(-50%);
  48. 		}
  49. 	</style>
  50. </head>
  51. <body>
  52. 	<div class="autoImg">
  53. 		<img src="./img/girl_pic@2x.png" alt="" class='auto_img'>
  54. 	</div>
  55. 	<div class="autoImg">
  56. 		<img src="./img/bg.jpg" alt="" class='auto_img'>
  57. 	</div>
  58. 	<div class="autoImg">
  59. 		<img src="./img/img3.png" alt="" class='auto_img'>
  60. 	</div>
  61. 	<div class="autoImg">
  62. 		<img src="./img/girl_pic@2x.png" alt="" class='auto_img'>
  63. 	</div>
  64. 	<div class="autoImg">
  65. 		<img src="./img/img2.png" alt="" class='auto_img'>
  66. 	</div>
  67. 	<div class="autoImg">
  68. 		<img src="./img/img4.png" alt="" class='auto_img'>
  69. 	</div>
  70. </body>
  71. <script>
  72. 	$(function () {
  73. 		$('.auto_img').each(function (index) {
  74. 			var ind = index;
  75. 			$(this).load(function () {
  76. 				var ratioT = $(this).width()/$(this).height();  //初始图片的宽高比
  77. 				var ratioP = $(this).parent().width()/$(this).parent().height();  //图片容器的宽高比
  78. 				console.log('父元素：'+ '宽高比：' + ratioP + ' 宽:'+$(this).parent().width() +' 高:'+ $(this).parent().height()+ ' 索引:'+ ind);
  79. 				console.log( '初始图片：'+ '宽高比：' + ratioT + ' 宽:'+$(this).width() +' 高:'+ $(this).height()+ ' 索引:'+ ind);
  80. 				if ( ratioT <= ratioP ) {
  81. 					$(this).addClass('auto_img_Width');
  82. 				} else {
  83. 					$(this).addClass('auto_img_Height');
  84. 				}
  85. 			})
  86. 		})
  87. 	})
  88. </script>
  89. </html>

　　

　　图片原始图： 

效果图：      缺点： 丢失了图片的部分边角；      优点： 保持了图片的比例，不变形

jq获取图片的原始尺寸，自适应布局的更多相关文章

  1. js获取图片信息（一）-----获取图片的原始尺寸

    如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...

  2. JavaScript获取图片的原始尺寸

    页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...

  3. 如何用JavaScript在浏览器端获取图片的原始尺寸大小？

    var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...

  4. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  6. 使用Python获取图片的物理尺寸(KB)

    如何获取图片的物理尺寸,而非(width, height)? #! -*- coding: utf-8 -*- import requests import io url = "https: ...

  7. [转]js动态获取图片长宽尺寸

    http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...

  8. 转载：js动态获取图片长宽尺寸（兼容所有浏览器，速度极快）

    转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...

  9. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

随机推荐

  1. 几种常见排序算法原理&C语言实现

    一.冒泡排序(以下各法均以从小到大排序为例,定义len为数组array的长度) 原理:比较相邻元素的大小,对于每次循环,按排序的规则把最值移向数组的一端,同时循环次数依次减少. C代码实现 写法一: ...

  2. 快速搭建MySQL复制集

    快速搭建MySQL复制集 1 环境说明 MySQL版本 5.6 basedir :/u01/my3306 #MySQL软件目录 数据目录 :/u01/mysql/[实例名]/data 日志目录 :/u ...

  3. 【我的漫漫跨考路】有生之年·调完了BUG--冒泡排序C++版本

    正文之前 今天去牛客网试了试一些实战编程题,感觉贼有意思,但是也很难,挑了个成绩排序的算法题我就开始怼! 对我一个编程经验并不是很丰富的人来说,确实算是个挑战了. 所以我满满当当的搞了四个小时多,才算 ...

  4. VMware Workstation-虚拟机的安装

    虚拟机的优势对于我来说也只是方便测试浏览器的兼容性: (1)避免重启本地物理机(多次安装/卸载不同版本的浏览器,每次需要重启电脑才能生效) (2)在虚拟机内创建不同的操作系统,比如WindowsXP内 ...

  5. .net core 2.0学习笔记（一）：开发运行环境搭建

    期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...

  6. linux 两个查找工具 locate，find详解

    linux 中有很多查找工具,今天主要讲解locate,find两个工具. 1.locate (1)查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 注意:如果这 ...

  7. ubuntu14.04安装ssh和ftp

    1.安装SSH >1.先使用netstat -tl或service ssh status查看ssh服务是否开启,如果没有开启,用service ssh restart开启,如果没有安装,使用su ...

  8. 【社交系统ThinkSNS+研发日记三】基于 Laravel Route 的 ThinkSNS+ Component

    [社交系统ThinkSNS+研发日记系列] 一.<ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1> 二.<基于 Laravel 开发 Th ...

  9. JDK问题--linux下java unrecognized class file version错误的解决

    linux下java unrecognized class file version错误的解决 环境:RedHat Linux Enterprise 5.4 问题:java.sun.com下载jdk1 ...

  10. JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules

    随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...