js和jquery如何获取图片真实的宽度和高度


Posted in Javascript onSeptember 28, 2014

1、什么时候需要获取图片真实的宽度和高度

在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式!

另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法

1)给所有的图片加上这样的样式

1

.news img{margin:5px auto; display:block;width:100%; height:auto;}

但是这种方式有另外一个问题就是,如果插入的图片本身就很小的话,也会被直接拉伸成100%显示,显然这是不合理的!那么这里就介绍另外一种方式就是通过js动态展示图片的尺寸!

2)js动态获取图片的尺寸

jquery方式

代码如下

var _w = parseInt($(window).width());//获取浏览器的宽度
$(".new_mess_c img").each(function(i){
var img = $(this);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
$("<img/>").attr("src", $(img).attr("src")).load(function() {
/*
如果要获取图片的真实的宽度和高度有三点必须注意
1、需要创建一个image对象:如这里的$("<img/>")
2、指定图片的src路径
3、一定要在图片加载完成后执行如.load()函数里执行
*/
realWidth = this.width;
realHeight = this.height;
//如果真实的宽度大于浏览器的宽度就按照100%显示
if(realWidth>=_w){
$(img).css("width","100%").css("height","auto");
}
else{//如果小于浏览器的宽度按照原尺寸显示
$(img).css("width",realWidth+'px').css("height",realHeight+'px');
}
});
});

js方式

代码如下

window.onload = function(){
function getViewSize() {//获取浏览器视口的宽高
return {
"w": window['innerWidth'] || document.documentElement.clientWidth,
(3water.com) "h": window['innerHeight'] || document.documentElement.clientHeight
}
}
function getFullSize() {//获取浏览器最大的宽度
var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) +
Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) +
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
w = Math.max(document.documentElement.scrollWidth, w);
h = Math.max(document.documentElement.scrollHeight, h);
return {
"w": w,
"h": h
};
}
var _sv_w = getViewSize()["w"];
var _sf_w = getFullSize()["w"];
var _w = _sv_w;//这里用视口的宽度,具体视情况
var Imgarray = document.getElementsByTagName("img");
var realWidth;//真实的宽度
var realHeight;//真实的高度
for(var i =0;i<Imgarray.length;i++){
var imgtemp = new Image();//创建一个image对象
imgtemp.src = Imgarray[i].src;
imgtemp.index = i;//指定一个检索值,用于确定是哪张图
imgtemp.onload = function(){//图片加载完成后执行
var _stemp = this;//将当前指针复制给新的变量,不然会导致变量共用
realWidth = this.width;
realHeight = this.height;
if(realWidth >=_w )
{
Imgarray[_stemp.index].style.width = _w+'px';
Imgarray[_stemp.index].style.height = 'auto';
}
else{
Imgarray[_stemp.index].style.width = realWidth+'px';
Imgarray[_stemp.index].style.height = realHeight+'px';
}
}
}
}

上面两种方法中jquery比较简单,实现起来比较快,第二种比较复杂些,但是执行起来比jquery要快!

Javascript 相关文章推荐
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
如何更好的编写js async函数
May 13 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 #Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 #Javascript
js propertychange和oninput事件
Sep 28 #Javascript
javascript检测是否联网的实现代码
Sep 28 #Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 #Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 #Javascript
You might like
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php操作mongoDB实例分析
2014/12/29 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python3实现表白神器
2019/04/09 Python
python制作朋友圈九宫格图片
2019/11/03 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
四种会话跟踪技术
2015/05/20 面试题
淘宝店铺营销方案
2014/02/13 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
初中语文教师研修日志
2015/11/13 职场文书
家电创业计划书
2019/08/05 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android