javascript图片自动缩放和垂直居中处理函数

代码如下:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;}
.testCss1{width:300px;height:300px;border:1px red solid;text-align:center;display:block;}
.testCss2{width:400px;height:300px;border:1px red solid;text-align:center;display:block;}
</style>
<script type="text/javascript">
function autoSizeImg(Contents,offsetWidth,offsetHeight,vlmiddle){
var o=Contents.getElementsByTagName("IMG");
var cwidth= window.getComputedStyle?window.getComputedStyle(Contents,null).width:Contents.currentStyle["width"];
var cheight=window.getComputedStyle?window.getComputedStyle(Contents,null).height:Contents.currentStyle["height"];
var ncwidth=parseInt(cwidth);
var ncheight=parseInt(cheight);
for(var i=0;i<o.length;i++){
var img=o[i];
var iw=img.width;
var ih=img.height;
if(img.width>ncwidth){
var nw=ncwidth-offsetWidth;
img.width=nw
img.height=(nw*ih)/iw;
}else if(img.width<ncwidth&&img.height>ncheight){
var nh=ncheight-offsetHeight;
img.height=nh;
img.width=(nh*iw)/ih;
}
if(img.height>ncheight&&img.width<ncwidth){
var hh=ncheight-offsetHeight;
img.height=nh;
img.width=(nh*iw)/ih;
}
if(vlmiddle)img.style.marginTop=((ncheight-img.height)/2)+"px";
}
}
</script>
</head>

<body>
<div class="testCss">
<img src="http://zsrimg.ikafan.com/file_images/sucai/111131524.jpg" onload="autoSizeImg(this.parentNode,5,5,true)"/>
</div>
<div class="testCss1">
<img src="http://zsrimg.ikafan.com/upload/20081010215957304.jpg" onload="autoSizeImg(this.parentNode,5,5,true)"/>
</div>
<div> </div>
<div class="testCss2">
<img src="http://zsrimg.ikafan.com/upload/20081010215958874.gif" onload="autoSizeImg(this.parentNode,5,5,true)"/>
</div>
</body>
</html>

注释：
1、后面的testCss1和testCss2两个样式跟testCss是一样的。只是设置了大小。
2、红色部分的height和width必须定义，是设置存放img外面的父层容器的高和宽。
3、text-algin:为图片水平居中
4、display:block，必须设置。否则FF下启用自动缩放不起作用。

使用方法：
1、是需要在img的父层定义样式，包含上述注释里面提到的东西；
2、是img加上

onload="autoSizeImg(this.parentNode,5,5,true)"

参数说明：
参数Contents一般采用this.parentNode,即使img的父容易
参数offsetWidth,offsetHeight分别是宽和高度居中的修正值。
参数vlmiddle设置为true则是垂直居中

Untitled

.testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;}
.testCss1{width:300px;height:300px;border:1px red solid;text-align:center;display:block;}
.testCss2{width:400px;height:300px;border:1px red solid;text-align:center;display:block;}

/*
函数功用:图片自动缩放和垂直居中处理函数
编写时间:2008-08-06
编 写 人:PaulLeder
联 系 我:paulleder@yeah.net
*/
function autoSizeImg(Contents,offsetWidth,offsetHeight,vlmiddle){
var o=Contents.getElementsByTagName("IMG");
var cwidth= window.getComputedStyle?window.getComputedStyle
(Contents,null).width:Contents.currentStyle["width"];
var cheight=window.getComputedStyle?window.getComputedStyle
(Contents,null).height:Contents.currentStyle["height"];
var ncwidth=parseInt(cwidth);
var ncheight=parseInt(cheight);
for(var i=0;incwidth){
var nw=ncwidth-offsetWidth;
img.width=nw
img.height=(nw*ih)/iw;
}else if(img.widthncheight){
var nh=ncheight-offsetHeight;
img.height=nh;
img.width=(nh*iw)/ih;
}
if(img.height>ncheight&&img.width

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 未知大小图片在已知容器中的垂直和水平居中问题

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. CSS布局中,未知大小图片的垂直居中,一直是比较头疼的问题,标准浏览器只要设定容器的line-height和图片的vertical-align:middle;就可以了,但对IE没用,几个月前在国外网站看到了一则对IE的解决方法,感觉不是很理想,也没当回事.最近看到经常有朋友在问类似的问题,又把代码翻了出来,针对IE改了下. CSS .box{  height:140px;  width:200px;  border: so

  • iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

    iOS - UIButton(UIEdgeInsets)／设置button上的文字和图片上下垂直居中对齐

    UIEdgeInsets typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets

  • CSS图片响应式 垂直水平居中

    CSS图片响应式 垂直水平居中

    我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

  • JS实现图片垂直居中显示小结

    第1种,居中效果 <div class="box"> <div class="center">居中效果</div> </div> /*第1种,垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc; position: relative; } .center{ width: 100px;height: 100px;background: gray

  • 用css实现图片垂直居中的使用技巧

    题目的难点在于两点: 垂直居中: 图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为

  • 文字或图片元素在DIV中垂直居中

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

  • js+CSS 图片等比缩小并垂直居中实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript图片自动缩放和垂直居中处理函数

    javascript图片自动缩放和垂直居中处理函数

    复制代码 代码如下: <html> <head> <title>Untitled</title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red sol

  • 兼容ie、firefox的图片自动缩放的css跟js代码分享

    需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset

  • JS+css 图片自动缩放自适应大小

    我加了css的限制: 复制代码 代码如下: div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;} ◎ max-width:600px; 在IE7.FF等其他非IE浏览器下最大宽度为600px.但在IE6中无效. ◎ width:600px; 在所有浏览器中图片的大小为600px

  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]

    今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏.当然,如果你有更好的解决方案,希望能与我交流. 代码如下: .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;pad

  • 原生javascript图片自动或手动切换示例附演示源码

    原生javascript图片自动或手动切换示例附演示源码

    一.效果图  二.html代码 复制代码 代码如下: <style type="text/css"> .container, .container *{margin:0; padding:0;} .container{width:408px; height:168px; overflow:hidden;position:relative;} .slider{position:absolute;} .slider li{ list-style:none;display:inl

  • js实现固定显示区域内自动缩放图片的方法

    本文实例讲述了js实现固定显示区域内自动缩放图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • javascript 图片轮换 函数化继承

    javascript 图片轮换 函数化继承

    先看下前几天的动画是如何构造JS的: 复制代码 代码如下: var photo=function(){ var index=0,a,b,c,d; return { show:function(){}, auto:function(){} } } var aa=photo(); //基本上是 用return 返回了一些方法. // 1:无法初始化就执行 auto. // 2:在初始化的时候,我没办法把this指向aa. //上面两个问题,会很不方便. 1:我不愿意让自己去这洋写: 复制代码 代码如

  • JavaScript等比例缩放图片控制超出范围的图片

    js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,我们以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好. 复制代码 代码如下: <html><head><title>等比例缩放图片</title><script>function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽

  • JavaScript实现图片自动加载的瀑布流效果

    JavaScript实现图片自动加载的瀑布流效果

    先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边

  • JavaScript实现自动切换图片代码

    本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

随机推荐