• 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 2018顺义啤酒节--北京频道--人民网 2018-10-08
  • 台湾遭遇的“断交潮”有无化解之道? 2018-10-08
  • 习近平会见爱沙尼亚总统卡柳莱德 2018-10-08
  • 中国空间站研制建设正有序开展 坚持和平利用 2018-10-07
  • 网页图片自适应处理方法

    栏目: 编程语言 发布于: 2014-05-10 17:13:55

    本文总结了三种网页图片自适应处理方法,具体解决办法如下:

    第一种方法:

    <img src="01.gif"  width="100" onload="drawImage(this,100,70)" />
    
    function drawImage(ImgD,ImgDWidth,ImgDHeight){
    	var image=new Image();
    	image.src=ImgD.src;
    	if(image.width/image.height>=ImgDWidth/ImgDHeight){
    		if(image.width>ImgDWidth){
    			ImgD.width=ImgDWidth;
    			ImgD.height=(image.height*ImgDWidth)/image.width;
    		}
    		else{
    			ImgD.width=image.width;
    			ImgD.height=image.height;
    		}
    	}
    	else{
    		if(image.height>ImgDHeight){
    			ImgD.width=(image.width*ImgDHeight)/image.height;
    			ImgD.height=ImgDHeight;
    		}
    		else{
    			ImgD.width=image.width;
    			ImgD.height=image.height;
    		}
    	}
    }

    第二种方法:

    <img src="http://www.rocksun.cn/tech/UploadPic/2011618/2011618143434260.jpg" border="0" onload="return imgzoom(this,550);" style="cursor:pointer;" onclick="javascript:window.open(this.src);" />
    
    <script language="javascript">
    //图片自动调整的模式,1为按比例调整 ,2 按大小调整。
    var resizemode=1
    function imgresize(o){
    	if(resizemode==2 || o.onmousewheel){
    		if(o.width > 500 ){
    			o.style.width='500px';
    		}
    		if(o.height > 800){
    			o.style.height='800px';
    		}
    	}else{
    		var parentNode=o.parentNode.parentNode;
    		if(parentNode){
    			if(o.offsetWidth>=parentNode.offsetWidth){
    				o.style.width='98%';
    			}
    		}else{
    			var parentNode=o.parentNode
    			if(parentNode){
    				if(o.offsetWidth>=parentNode.offsetWidth){
    					o.style.width='98%';
    				}
    			}
    		}
    	}
    }
    </script>

     第三种办法(Jquery解决的),关键代码如下:

    $('#ac_content img').each(function(){
    	appropriate_width=300;
    	if($(this).width()>appropriate_width){
    		$(this).css({'width':appropriate_width+'px','height':$(this).height()*appropriate_width/$(this).width()+'px'});
    		$(this).attr('title','点击查看大图片');
    		$(this).bind({
    			click:function(){
    				window.open($(this).attr('src'));
    			}
    		});
    	}
    });

    您可能感兴趣的文章

    • 网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法
    • 网页载入过程中自动调整图片的宽度
    • 手机网站宽度自动适应手机屏幕
    • 强大的PHP 图片处理类(水印、透明度、缩放、锐化、旋转、翻转、剪切、反色)
    • 复制网页文章自动添加版权信息
    • Js地址栏特效(显示页面内所有加链接的图片的大小和查看当前的浏览器的高度)
    • 禁止网页右键、复制、另存为、查看源文件等功能实现网页源代码?;?/li>
    • 上传内容中的图片过宽的解决办法
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:网页图片自适应处理方法
    IT技术书籍推荐:
    Python 3面向对象编程
    Python 3面向对象编程
    达斯帝·菲利普斯 (Dusty Phillips) (作者), 肖鹏 (译者), 常贺 (译者), 石琳 (译者)
    Python 是一种面向对象的解释型语言,面向对象是其非常重要的特性。本书通过Python 的数据结构、语法、设计模式,从简单到复杂,从初级到高级,一步步通过例子来展示了Python 中面向对象的概念和原则。本书不是Python 的入门书籍,适合具有Python 基础经验的开发人员阅读。如果你拥有其他面向对象语言的经验,你会更容易理解本书的内容。