纯js实现div内图片自适应大小(已测试,兼容火狐)


Posted in Javascript onJune 16, 2014

这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理。因为如果拉伸,图片可能就失真了。

废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8

以下是js代码:

<script type="text/javascript" language="javascript"> 
window.onload=function(){ 
changeImgSize(); 
} 
function changeImgSize(){ 
var getContainer=document.getElementById('imgcontainer'); 
var getIMG=getContainer.getElementsByTagName('img')[0]; 
var fw=getContainer.offsetWidth-(2*getContainer.clientLeft); 
var fh=getContainer.offsetHeight-(2*getContainer.clientTop); 
var iw=getIMG.width; 
var ih=getIMG.height; 
var m=iw/fw; 
var n=ih/fh; 
if(m>=1&&n<=1) 
{ 
iw=Math.ceil(iw/m); 
ih=Math.ceil(ih/m); 
getIMG.width=iw; 
getIMG.height=ih; 
} 
else if(m<=1&&n>=1) 
{ 
iw=Math.ceil(iw/n); 
ih=Math.ceil(ih/n); 
getIMG.width=iw; 
getIMG.height=ih; 
} 
else if(m>=1&&n>=1) 
{ 
getMAX=Math.max(m,n); 
iw=Math.ceil(iw/getMAX); 
ih=Math.ceil(ih/getMAX); 
getIMG.width=iw; 
getIMG.height=ih; 
} 
if(getIMG.height<fh) 
{ 
var getDistance=Math.floor((fh-getIMG.height)/2); 
getIMG.style.marginTop=getDistance.toString()+"px"; 
} 
} 
</script>

以下是html代码:
<div class="sy_pic" id="imgcontainer"><img src="images/444.jpg" /></div>

以下是css代码:
.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}

自己换下图片地址使用。有问题或者指教请加QQ群:255708401。
Javascript 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 #Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 #Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 #Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 #Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 #Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 #Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 #Javascript
You might like
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python中dir函数用法分析
2015/04/17 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
婚前协议书范本
2014/10/27 职场文书
推荐信范文大全
2015/03/27 职场文书
公司酒会主持词
2015/07/02 职场文书
运动会100米广播稿
2015/08/19 职场文书
2019各种保证书范文
2019/06/24 职场文书
mysql优化
2021/04/06 MySQL
python如何利用traceback获取详细的异常信息
2021/06/05 Python