文章参考 http://www.cnblogs.com/ymy124/p/4538695.html
在工作中遇到这么一个问题 —— 某个图片前后都有空白,大概前面的空白占图片的1/3 ,后面的占图片高度的1/4,为了节省流量,因此想根据图片高度计算前后的留白,因为图片的大小也是自适应的。
理论基础:
document.getElementById("img_load").onload = function(){ //获取图片的高度和宽度 //console.log(this.width); //console.log(this.height); var topHeight = this.height/3; var bottomHeight = this.height/5; $(this).before('<div style="height: '+topHeight+'px"></div>') $(this).after('<div style="height: '+bottomHeight+'px"></div>') };
项目实战:
//guajiangqu_img图片加载完之后执行的方法 guajiangqu_img.onload = function(){ $(this).css({ "padding-top":this.height * 0.75 + "px", "padding-bottom":this.height * 0.75 + "px" }); }