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结构的站点更是如此.能否让图 ...
随机推荐
- 接口工具-POSTMAN
前端的一项总要工作就是测试接口,当然这也可能是你们后台人员做的.不管怎样,都需要测试接口,那么就来介绍一款谷歌浏览器接口测试插件,postman.首先你要去谷歌的应用商店,搜索这个插件,(需要FQ), ...
- bzoj3728: PA2014Final Zarowki
Description 有n个房间和n盏灯,你需要在每个房间里放入一盏灯.每盏灯都有一定功率,每间房间都需要不少于一定功率的灯泡才可以完全照亮. 你可以去附近的商店换新灯泡,商店里所有正整数功率的 ...
- SASS笔记
前端开发离不开三剑客:html.Javascript.css. html:主要进行网页内容的开发语言: JavaScript: 主要对页面业务逻辑的开发语言: css:主要对网页外观样式进行注解的文本 ...
- Android融合推送MixPush SDK集成多家推送平台，共享系统级推送，杀死APP也能收到推送
消息推送是App运营的重要一环,为了优化消息推送成功率,降低电量和流量消耗,系统级的推送服务显得尤为重要.小米和魅族由此推出了自家的推送平台,在MIUI和Flyme上共享系统级推送服务,让APP在被杀 ...
- hdu--1028--Ignatius and the Princess III （母函数）
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- node中使用es6/7/8 --- 支持性与性能
前言 这几年react.vue的快速发展,越来越多的前端开始讲es6的代码运用在项目中,因为我们可以通过babel进行转译为低版本的js以便于运行在所有浏览器中,import.export.let.箭 ...
- python编程基础知识—列表（二）
3操作列表 3.1 遍历整个列表 使用for循环 cars = ['bmw','audi','toyota','Jeep'] for i in cars: print(i) bmw audi toyo ...
- CSS3 基础(1)——选择器详解
CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...
- Python获取区域面积
import cv2 import numpy as np def get_leave_areas(image): img = cv2.imread(image) GrayImage = cv2.cv ...
- 51NOD 1258 序列求和 V4 [任意模数fft 多项式求逆元 伯努利数]
1258 序列求和 V4 题意:求\(S_m(n) = \sum_{i=1}^n i^m \mod 10^9+7\),多组数据,\(T \le 500, n \le 10^{18}, k \le 50 ...