本文总结了三种网页图片自适应处理方法,具体解决办法如下:
第一种方法:
- <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://tech.cncms.com/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'));
- }
- });
- }
- });
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。