详解 JS/jQuery 实现加载图片时自适应大小和等比例摆放
2017-03-03| 程成| 1984| 2| jQuery/JS

有时候在前台需要展示图片的时候,发现图片的大小不一致,有的大,有的小。更恶心的是图片有的是竖着看的,有的是横着看的。


这个时候你如果给图片固定大小,要么图片会变形,要么有的图片会超出容器范围。最简单的方法就是写个js/jquery来自动适应图片的长宽,让图片能够在容器内正常显示。


下面提供一个很好的jquery方法,自适应图片在页面中显示的大小和位置:


function ImgPosInitMobs(obj) {
    //图片
    var img = $(obj);
    //图片存在则继续
    if (typeof obj.naturalWidth != "undefined") {
    	//图片真实宽度
        var realWidth = obj.naturalWidth;
        //图片真实高度
        var realHeight = obj.naturalHeight;
        //图片容器宽度
        var standwidth=$(obj).parent().parent().width();
        //图片容器高度
        var standheight=$(obj).parent().parent().height();
        //根据比例来算出图片的比例
        if (realWidth/realHeight > standwidth/standheight) {
            var realWidth1 =standwidth;
            var realHeight1=standwidth * realHeight / realWidth;
        }else {
            var realHeight1=standheight;
            var realWidth1=standheight * realWidth / realHeight;
        }
        //重新赋予图片宽高
        img.width(realWidth1);
        img.height(realHeight1);
        //图片距离容器的摆放位置
        img.css("margin-top", -(realHeight1 - standheight) / 2);
        img.css("margin-left", -(realWidth1 - standwidth) / 2);
    }
}



调用方法是在页面中图片添加个onload事件,如下


<img src="XXXXXXX" onload="ImgPosInitMobs(this)" />


通过如上的方法就可以使图片自适应div中的大小和摆放位置,非常实用的一个方法~



×
作者:程成
QQ:492245711