JS获取图片实际宽高及根据图片大小进行自适应
更新时间：2013年08月11日 18:56:16 作者：
图片实际宽高使用js进行获取以及根据图片大小进行自适应，此功能个人感觉比较实用，在此贡献出来，希望对大家有所帮助
JS获取图片实际宽高，以及根据图片大小进行自适应
<img src="http://xxx.jpg" id="imgs" onload="adapt();"/>
function adapt(){
var tableWidth = $("#imgTable").width(); //表格宽度
var img = new Image();
img.src =$('#imgs').attr("src") ;
var imgWidth = img.width; //图片实际宽度
if(imgWidth<tableWidth){
$('#imgs').attr("style","width: auto");
}else{
$('#imgs').attr("style","width: 100%");
}
}
另可设置CSS样式：
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
复制代码 代码如下:
<img src="http://xxx.jpg" id="imgs" onload="adapt();"/>
复制代码 代码如下:
function adapt(){
var tableWidth = $("#imgTable").width(); //表格宽度
var img = new Image();
img.src =$('#imgs').attr("src") ;
var imgWidth = img.width; //图片实际宽度
if(imgWidth<tableWidth){
$('#imgs').attr("style","width: auto");
}else{
$('#imgs').attr("style","width: 100%");
}
}
另可设置CSS样式：
复制代码 代码如下:
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
相关文章
交叉观察器 IntersectionObserver用法详解
这篇文章主要为大家介绍了交叉观察器 IntersectionObserver用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
匿名函数没有实际名字的函数，匿名函数(function() {})();是一个特殊的闭包写法。本文蛀牙给大家介绍JavaScript 中的匿名函数((function() {})();)与变量的作用域,需要的朋友可以参考下2018-08-08
JavaScript基于DOM操作实现简单的数学运算功能示例
这篇文章主要介绍了JavaScript基于DOM操作实现简单的数学运算功能,涉及javascript节点操作、元素遍历及数学运算相关操作技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了微信小程序实现动态验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
在前端开发中,判断多个请求完毕是一个常见需求,这篇文章主要介绍了前端如何判断多个请求完毕实战及常见问题的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
最近做了个项目是要求实现99乘法表隔行变色，本文给大家分享通过多种方式实现js 99 乘法表，感兴趣的朋友一起看看吧2016-02-02
下面小编就为大家分享一篇使用selenium抓取淘宝的商品信息实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
今天小编就为大家分享一篇关于谈谈JavaScript中super(props)的重要性，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
在开发后台管理系统时，常常会涉及到各种树状结构的数据处理逻辑，例如：增，删，改，查等。而树状结构的处理就没有数组那么的直观。本文为大家总结了JS树状结构的数据处理的方法，需要的可以参考下2022-07-07
最新评论