文章中图片宽度过大,可能会把页面撑开的问题

本文介绍了一种使用JavaScript控制图片按比例缩放的方法,避免了因图片尺寸过大导致页面布局错乱的问题,并提供了具体的实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

图片宽度过大,可能会把页面撑开,很多解决办法都是通过css样式来控制的,这种方式存在bug(图片可能变得很小)

只有刷新才能回复正常,建议改成通过js控制:

<SCRIPT language=JavaScript>

//图片按比例缩放

var flag=false;

function DrawImage(ImgD,iwidth,iheight){

    //参数(图片,允许的宽度,允许的高度)

    var image=new Image();

    image.src=ImgD.src;

    if(image.width>0 && image.height>0){

    flag=true;

    if(image.width/image.height>= iwidth/iheight){

        if(image.width>iwidth){ 

        ImgD.width=iwidth;

        ImgD.height=(image.height*iwidth)/image.width;

        }else{

        ImgD.width=image.width; 

        ImgD.height=image.height;

        }

        ImgD.alt=image.width+"×"+image.height;

        }

    else{

        if(image.height>iheight){ 

        ImgD.height=iheight;

        ImgD.width=(image.width*iheight)/image.height;       

        }else{

        ImgD.width=image.width; 

        ImgD.height=image.height;

        }

        ImgD.alt=image.width+"×"+image.height;

        }

    }

}

//zoom内的图片按比例缩放

var div = document.getElementById("zoom");

var nodes = div.childNodes;

var sLen = div.childNodes.length;

var obj;

for(var i=0;i<sLen;i++){

         obj = nodes[i];

         if(obj.tagName=="CENTER"){

                   var imgNodes = obj.childNodes;

                   var iLen = imgNodes.length;

                   var img;

                   for(var j=0;j<iLen;j++){

                            if(imgNodes[j].tagName=="IMG"){

                                     img = imgNodes[j];

                                     DrawImage(img,700,700);

                            }

                   }

         }

}

</SCRIPT>

 

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值