[JS]JS图片超过宽度当图片大于外层设置高度宽度自动缩小
[JS]JS图片超过宽度当图片大于外层设置高度宽度自动缩小
<div id="tupian"><img alt="示例图片" width="1024" height="768" src="http://www.cuplayer.com/xxx.jpg" /></div>
- <script type="text/javascript" >
- //cuplayer.com 缩放图片到合适大小
- function ResizeImages()
- {
- var myimg,oldwidth,oldheight;
- var maxwidth=400; //cuplayer.com 图片缩放后的宽度,可自行修改
- var maxheight=300; //cuplayer.com 图片缩放后的高度,可自行修改
- var imgs = document.getElementById('tupian').getElementsByTagName('img'); //如果你定义的id不是tupian,请修改此处
- for(i=0;i<imgs.length;i++){
- myimg = imgs[i];
- if(myimg.width > myimg.height)
- {
- if(myimg.width > maxwidth)
- {
- oldwidth = myimg.width;
- myimgmyimg.height = myimg.height * (maxwidth/oldwidth);
- myimg.width = maxwidth;
- }
- }else{
- if(myimg.height > maxheight)
- {
- oldheight = myimg.height;
- myimgmyimg.width = myimg.width * (maxheight/oldheight);
- myimg.height = maxheight;
- }
- }
- }
- }
- //cuplayer.com 缩放图片到自定义大小
- ResizeImages();
- </script>
上面那张图,因为在层tupian里,如果tupian设置的大小比img的小,那么,此时,img会按js里面的设置缩小。。
热门文章推荐
- [JS]window.location获取url各项参数详解
- [JS]jQuery,javascript获得网页的高度和宽度
- [JS]视频弹窗视频弹出层videoLightBox(含三种播放器的用法)
- [JS]JS提交中文encodeURI两次转码
- [JS]js版方面encodeURI转码和decodeURI解码的用法实例
- [JS]js取当前机子的时间戳实例
- [JS]AES加密(基于crypto-js)PHP后端解密
- [JS]data:image/png;base64写法的用途及说明
请稍候...