有时候在前台需要展示图片的时候,发现图片的大小不一致,有的大,有的小。更恶心的是图片有的是竖着看的,有的是横着看的。
这个时候你如果给图片固定大小,要么图片会变形,要么有的图片会超出容器范围。最简单的方法就是写个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中的大小和摆放位置,非常实用的一个方法~