需求:多个显示区,宽高等比变化,每个显示区域内的原始图片比例、尺寸不同,让图片比例不失调自适应显示区域。
解决方法:将图片等比例缩放后,只显示图片的部分区域
HTML:row和col-xs-6是bootstrap的栅格类
<div class="row"> <div class="col-xs-6"> <a class="wrap" href=""> <img οnlοad="autoSizeImg(this)" src="" alt="..."> </a> </div> <div class="col-xs-6"> <a class="wrap" href=""> <img οnlοad="autoSizeImg(this)" src="" alt="..."> </a> </div> </div>
a.wrap{ overflow:hidden; float:left; width:100%; height:160px; }
function autoSizeImg(obj){ height = $(obj).parent("a").height(); width = $(obj).parent("a").width(); if($(obj).width() <= $(obj).height()){ $(obj).css("width", "100%"); if($(obj).height() > height){ $(obj).css("top", "-"+($(obj).height()-height)/2+"px"); }else{ var rate = (height-$(obj).height())/height; var rateWidth = $(obj).width()*(1+rate); $(obj).width(rateWidth); $(obj).css("left", "-"+($(obj).width()-width)/2+"px"); $(obj).css("height", "100%"); } }else{ $(obj).css("height", "100%"); if($(obj).width() > width){ $(obj).css("left", "-"+($(obj).width()-width)/2+"px"); }else{ var rate = (width-$(obj).width())/width; var rateHeight = $(obj).height()*(1+rate); $(obj).height(rateHeight); $(obj).css("top", "-"+($(obj).height()-height)/2+"px"); $(obj).css("width", "100%"); } } }