js实现div内图片自适应大小并裁剪

最新推荐文章于 2025-02-21 14:39:32 发布

Coding_Boy36

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量6k

点赞数 1

分类专栏： html 文章标签： html5 图片

本文链接：https://blog.youkuaiyun.com/xq43701200/article/details/75039981

版权

html 专栏收录该内容

13 篇文章

订阅专栏

主要用js来重新计算图片的大小，

window.onload=function(){
        changeImgSize();
    }
    function changeImgSize(){
        var getContainer=document.getElementById('imgcontainer');//父元素div
        var getIMG=getContainer.getElementsByTagName('img')[0];
        var fw=getContainer.offsetWidth-(2*getContainer.clientLeft);
        var fh=getContainer.offsetHeight-(2*getContainer.clientTop);
        var iw=getIMG.width;
        var ih=getIMG.height;
        var m=iw/fw;//图片与父元素宽度比
        var n=ih/fh;//图片与父元素高度比
        if(m>=1&&n<=1)//图片比父元素宽 或者图片比父元素短
        {
//            iw=Math.ceil(iw/m);
//            ih=Math.ceil(ih/m);
//            getIMG.width=iw;
//            getIMG.height=ih;
            iw=Math.ceil(iw/n);
            ih=Math.ceil(ih/n);
            getIMG.width=iw;
            getIMG.height=ih;
        }
        else if(m<=1&&n>=1)//图片比父元素窄 或者图片比父元素高
        {
            iw=Math.ceil(iw/m);
            ih=Math.ceil(ih/m);
            getIMG.width=iw;
            getIMG.height=ih;
        }
        else if(m>=1&&n>=1)
        {

            getMAX=Math.min(m,n);
            iw=Math.ceil(iw/getMAX);
            ih=Math.ceil(ih/getMAX);
            getIMG.width=iw;
            getIMG.height=ih;
        }
//        if(getIMG.height<fh)
//        {
//            var getDistance=Math.floor((fh-getIMG.height)/2);
         //   getIMG.style.marginTop=getDistance.toString()+"px";
        var getDistance;
        var getDistance2;
        if(fh>getIMG.height){
            getDistance=Math.floor((fh-getIMG.height)/2);
            getIMG.style.marginTop=getDistance.toString()+"px";
        }else {
            getDistance=Math.floor((getIMG.height-fh)/2);
            getIMG.style.marginTop="-"+getDistance.toString()+"px";
        }

        if(fw>getIMG.width){
            getDistance2=Math.floor((fw-getIMG.width)/2);
            getIMG.style.marginLeft=getDistance2.toString()+"px";
        }else {
            getDistance2=Math.floor((getIMG.width-fw)/2);
            getIMG.style.marginLeft="-"+getDistance2.toString()+"px";
        }

    }

html中：

<div class="sy_pic" id="imgcontainer"><img src="${contextPath}/content/images/logo_02.png" /></div>


css样式：
.sy_pic{
    width:200px;
    height:300px;
    text-align:center;
    overflow: hidden;
    border:#000 solid 5px;
}