原理： 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. 【bzoj1458】士兵占领

    Description 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占领了整个棋盘当满足第i行至少放 ...

  2. python-继承类执行的流程

    在读python数据机构与算法, 发现了下面这个例子, 之前没有碰到过, 记录下来 In [17]: class A: def f(self): self.g() def g(self): print ...

  3. 4.npm模块安装和使用(axios异步请求，lodash工具库）

    建立package.json npm init 下载包 npm install axios npm install lodash 下载包,并加到package里面 npm install axios ...

  4. 2.跑nodejs文件

    1.安装nodejs的环境,这里不介绍了. app.js 'use strict'; //process.argv 接受变量 var command = process.argv[2]; var a ...

  5. SASS笔记

    前端开发离不开三剑客:html.Javascript.css. html:主要进行网页内容的开发语言: JavaScript: 主要对页面业务逻辑的开发语言: css:主要对网页外观样式进行注解的文本 ...

  6. Comparable与Comparator，java中的排序与比较

    1:比较和排序的概念 比较:两个实体类之间按>,=,<进行比较. 排序:在集合类中,对集合类中的实体进行排序.排序基于的算法基于实体类提供的比较函数. 基本型别都提供了默认的比较算法,如s ...

  7. Python 3.X安装配置

    0x01 安装Python 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的. 本教程安装的是python-3.6.1-amd64版本. Python官网:https ...

  8. 【LeetCode】数组-2(628)-数组中三个数相乘最大

    题目不难: 思路一(排序取两端) 先排序,最后三个数相乘即可.(很快就想到了,但是没想全面 [

  9. [Oracle Support]PeopleSoft Support中Fixes,Patches,Bundles,Packs？

    在Oracle Support中经常能看到下面术语,一起学习下. Fixes - 最小单元的维护,修复通常会解决一个特定的问题,例如:oracle可能会给您一个解决生产问题的解决方案. Patches ...

  10. 我读<代码整洁之道>--读书笔记整理

    第一章 整洁代码 "我可以列出我留意到的整洁代码的所有特点,但其中有一条是根本性的,整洁的代码总是看起来像是某位特别在意他的人写的.几乎没有改进的余地,代码作者设么都想到了,如果你企图改进它 ...