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获取图片的原始尺寸，自适应布局的更多相关文章
- js获取图片信息（一）-----获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...
- JavaScript获取图片的原始尺寸
页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...
- 如何用JavaScript在浏览器端获取图片的原始尺寸大小？
var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("&l ...
- js获取图片的原始尺寸
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- 使用Python获取图片的物理尺寸(KB)
如何获取图片的物理尺寸,而非(width, height)? #! -*- coding: utf-8 -*- import requests import io url = "https: ...
- [转]js动态获取图片长宽尺寸
http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...
- 转载：js动态获取图片长宽尺寸（兼容所有浏览器，速度极快）
转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...
- JQuery图片延迟加载插件,动态获取图片长宽尺寸
以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...
随机推荐
- HDU 6035---Colorful Tree（树形DP）
题目链接 Problem Description There is a tree with n nodes, each of which has a type of color represented ...
- css 的包含块 、负外边距，字体，文本行高
一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...
- dpkg和perl的依赖环境出现错误故障解决（磁盘原因）
内核: uname -a Linux localhost.localdomain 3.4.29-t4 #12 Wed Mar 13 16:50:15 EST 2013 armv7l armv7l ar ...
- [BZOJ 1500]维修数列 [Splay Tree从进阶到住院]
历尽艰辛终于A掉了这题QwQ 贴COGS评论区几句话=.= 策爷:"splay/块状链表的自虐题.".深刻理解到如果没有M倾向就不要去写这题了.. -Chenyao2333 记得b ...
- Canvas 实现灵动的红鲤鱼动画（上）
前言 上一篇文章<Canvas 仿百度贴吧客户端 loading 小球>实现了百度贴吧客户端的 loading 小球效果,同时还留下了一个任务:实现灵动的红鲤鱼动画. 这个动画效果实现起来 ...
- Hadoop入门第二篇-MapReduce学习
mapreduce是一种计算模型,是google的一篇论文向全世界介绍了MapReduce.MapReduce其实可以可以用多种语言编写Map或Reduce程序,因为hadoop是java写的,所以通 ...
- Spyder项目创建，打开与使用
1.Spyder项目的创建 新建一个Spyder项目需要点击Spyder上方标签栏中的Projects中的New Project 2.Spyder项目的打开 Spyder项目文件夹必须 存在.spyp ...
- 前端到后台ThinkPHP开发整站（完）
久违了,今天终于抽空把最后的写完了,这是这个项目的最后一篇文章了,把前台的栏目控制器和文章内容控制器的功能实现了. 栏目控制器: <?php namespace Home\Controller; ...
- C++ 开发OCX 的方法和注意事项
C++ 开发OCX 的方法和注意事项 前言 ActiveX控件是一种实现了一系列特定接口而使其在使用和外观上更象一个控件的COM组件.ActiveX控件这种技术涉及到了几乎所有的COM和OLE的技术精 ...
- 移动端表层div滑动，导致底层body滑动（touchmove的阻止）
body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touch ...