原理： 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获取图片的原始尺寸，自适应布局的更多相关文章

  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. SSRF漏洞学习

    SSRF SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问的内 ...

  2. python3.6成功安装scrapy

    本文基于环境:win10(64)+python3.6(64) 第一次直接pip install scrapy,安装出错,错误提示 error: Microsoft Visual C++ 14.0 is ...

  3. 使用Nginx搭建本地流媒体服务器

    Mac搭建nginx+rtmp服务器 1.打开终端,查看是否已经安装Homebrew,直接输入命令 man brew 如果Mac已经安装了, 会显示一些命令的帮助信息. 此时输入Q退出即可, 直接进入 ...

  4. Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. For example, given n = 3, a solution set is: "((()))", "(()())", "(())()", "()(())", "()()()"

    思路:采用递归的思想,当左括号数大于右括号数时可以加左或者右括号,否则只能加左括号,当左括号数达到n时,剩下全部.不过,每一个方法的调用都会产生一个栈帧,每执行一个方法就会出现压栈操作,所以采用递归的 ...

  5. 4．写一个控制台应用程序，接收一个长度大于3的字符串，完成下列功能： 1）输出字符串的长度。 2）输出字符串中第一个出现字母a的位置。 3）在字符串的第3个字符后面插入子串“hello”，输出新字符串。 4）将字符串“hello”替换为“me”,输出新字符串。 5）以字符“m”为分隔符，将字符串分离，并输出分离后的字符串。 */

    namespace test4 {/* 4．写一个控制台应用程序,接收一个长度大于3的字符串,完成下列功能: 1)输出字符串的长度. 2)输出字符串中第一个出现字母a的位置. 3)在字符串的第3个字符 ...

  6. swift UIButton边框添加阴影效果

    btn.layer.shadowOpacity = 0.8 //阴影区域透明度 btn.layer.shadowColor = UIColor.black.cgColor // 阴影区域颜色 btn. ...

  7. java ArrayList 踩坑记录

    做编程的一个常识:不要在循环过程中删除元素本身(至少是我个人的原则).否则将发生不可预料的问题. 而最近,看到一个以前的同学写的一段代码就是在循环过程中删除元素,我很是纳闷啊.然后后来决定给他改掉.然 ...

  8. VS 2017开发插件

    codemaid 代码清洁工具 commentsPlus 注释以斜体方式展示,并提供额外的注释格式 viasfora 尖括号颜色设置 reshaper 必备

  9. Docker 搭建开发环境

    本文介绍如何将Docker集成到开发环境,自动构建应用,并使容器拥有独立的内网IP为开发人员提供服务. 术语解释 Docker镜像:一个不可修改的"模板",每个代码版本对应一个镜像 ...

  10. cache buffer

    //本文基本上是摘要了网络上各位大神对cache.buffer的总结,由于是800年前保存在本地,所以也已经忘了出处了.感谢各位大神. //本文对这2个概念的理解尚浅,如果愿意补充那就再好不过了.  ...