图片在页面显示的处理方法

var w=$(".img li i").width();  //获取图片承载容器的宽度
$(".img li i").height(w*0.618); //设置图片承载容器的高度

$(window).resize(function(){ //浏览器窗口大小改变时重新获取图片承载容器的宽度、设置其高度
  var w=$(".img li i").width();
  $(".img li i").height(w*0.618);
});

function
img() { var a=$(this).width(), //获取图片宽度 b=$(this).height(), //获取图片高度 e=a/b; //计算宽高比 if(a>=b){ //如果宽度大于高度 if(e<1.618){ //如果宽高比小于等于1.618【PS.黄金比例宽高比1.618(宽1.618、高1)和0.618(宽0.618、高1)】,高度超出 $(this).css({width:"100%",height:"auto"}); //使宽度100%,保证宽度不留空白边 /*图片居中*/ var imgH = $(this).height(), //获取此时对应的图片高度 iH = $(this).parent().height(), //获取其承载元素的高度 h = -(imgH - iH)/2; //img-iH为图片高度超出承载容器的部分的高度 $(this).css('marginTop',h) //设置图片在容器中垂直居中 }else{ //如果宽高比大于1.618,宽度超出 $(this).css({height:"100%",width:"auto"}); //使高度100%显示,保证高度不留空白边 /*图片居中*/ var imgW = $(this).width(), //获取此时对应的图片宽度 iW = $(this).parent().width(), //获取其承载元素的宽度 w = -(imgW - iW)/2; //imgW-iW为图片宽度超出承载容器的部分的宽度 $(this).css('marginLeft',w) //设置图片在容器中水平居中 } }else{ //高度大于宽度(代码同宽高比e小于1.618) $(this).css({width:"100%",height:"auto"}); /*图片居中*/ var imgH = $(this).height(), iH = $(this).parent().height(), h = -(imgH - iH)/2; $(this).css('marginTop',h) } }

 

posted on 2016-08-05 19:53  jasonduanmu  阅读(389)  评论(0编辑  收藏  举报

导航