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

2023-04-19 原文

 
 
Untitled

注释：
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则是垂直居中

<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">         /*         函数功用:图片自动缩放和垂直居中处理函数         编写时间: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;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><div class="testCss"> <img src="https:https://resources.devmax.cn/uploads/20230419/d6cc0035b067dbd3345863540059c9d9.jpg" onload="autoSizeImg(this.parentNode,5,5,true)">
</div>     <div class="testCss1">         <img src="https://www.jb51.nethttps://resources.devmax.cn/uploads/20230419/898a3fa7fa68eb1253d33714912874e9.jpg" onload="autoSizeImg (this.parentNode,5,5,true)">
</div>     <div>&nbsp;</div>     <div class="testCss2">         <img src="https://www.jb51.nethttps://resources.devmax.cn/uploads/20230419/60696d847c0a4b7305db2e9fbcae9c57.gif" onload="autoSizeImg(this.parentNode,5,5,true)">
</div>

[Ctrl A 全选注:引入外部Js需再刷新一下页面才能执行]

javascript图片自动缩放和垂直居中处理函数的更多相关文章

微信小程序canvas实现水平、垂直居中效果

这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
HTML5数字输入仅接受整数的实现代码

这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
amaze ui 的使用详细教程

这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
html5简介_动力节点Java学院整理

这篇文章主要介绍了html5简介,用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，有兴趣的可以了解一下
ios – 如何垂直居中UICollectionView内容

我试图动态地居中UICollectionView的内容,但是现有的解决方案都没有考虑到每行可能有多个单元格的事实.我在这里尝试了这个centercustomtitleinUINavigationBar?以及两种解决方案：UICollectionViewverticallyCentred,无济于事.我很惊讶iOS默认情况下无法做到这一点,甚至更多的是无法获得当前显示的行数(这也解决了我的问题).此外
ios 8 Homescreen webapp,关闭和打开iPad停止javascript

我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗？解决方法这似乎是我在iOS8.1.1更新中解决的.
iOS 6 javascript与object.defineProperty的间歇性问题

当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题？https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说
ios – 如何使用JSExport导出内部类的方法

解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.
ios – 使用NSLayoutConstraint垂直居中两个视图

解决方法通过这样做,我能够做到这一点：棘手的部分是恒定值.该值是所有视图高度的一半,包括它们的分隔符.这意味着,如果imageview的高度为360,按钮的高度为70,分隔符为60,则该常量将为/2=245.确实应该有一种更聪明的方式,但是现在我觉得这没关系.

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下