网站地图 | RSS订阅 凌陈亮博客 - 专业上海SEO上海SEO优化,分享网站优化知识,同时提供上海SEO服务。
你的位置:首页 » 图片缩放
前端脚本

JS实现图片等比例缩放,占满DIV,短的显示全,长的超出隐藏

JS实现图片等比例缩放,占满DIV,短的显示全,长的超出隐藏

 <style type="text/css">
.div { float: left; overflow: hidden; margin: 5px; width: 200px; height: 150px; background: #97CFF0; border: solid 1px #09F; text-align: center; }
.div img { border: 0; }
</style>
<div class="div"><a href="#" target="_blank"><img src="images/1.jpg" alt="" onload="chgdivimgwh(this,200,150)" /></a></div>
<script>
//自动缩放图片尺寸,占满整个DIV,短的显示全,长的超出隐藏只显示部分,不够DIV宽高的则拉伸
//参数:图片对象,图片宽度,图片高度
function chgdivimgwh(obj,width,height){
 var image=new Image();
 image.src=obj.src; //获取图像路径
 var width1=image.width; //获取图像宽度
 var height1=image.height; //获取图像高度
 var a1=height1/width1;
 var a2=height/width;
 if(a1>a2){
  obj.width=width;
  obj.height=height1*width/width1;
  obj.style.marginTop='-' + Math.round((obj.height-height)/2)+ 'px';
 }else{
  obj.height=height;
  obj.width=width1*height/height1;
  obj.style.marginLeft='-' + Math.round((obj.width-width)/2)+ 'px';
 }
}
</script>

发布时间:2016年1月4日 | 评论:1 | 浏览: | 标签:Javascript  图片缩放  JS特效  

前端脚本

JS实现图片等比例缩放,水平垂直居中且展示全图

JS实现图片等比例缩放,水平垂直居中且展示全图

<style type="text/css">
.div { float: left; overflow: hidden; margin: 5px; width: 200px; height: 150px; background: #97CFF0; border: solid 1px #09F; text-align: center; }
.div img { border: 0; }
</style>
<div class="div"><a href="#" target="_blank"><img src="images/1.jpg" alt="" onload="chgimgwh(this,200,150)" /></a></div>
<script>
//自动缩放图片尺寸,水平垂直居中且展示全图,不够DIV宽高的就显示图片原本的尺寸
//参数:图片对象,最大宽度,最大高度
function chgimgwh(obj,width,height){
 var image=new Image();
 image.src=obj.src; //获取图像路径
 var width1=image.width; //获取图像宽度
 var height1=image.height; //获取图像高度
 var w=width1/width;
 var h=height1/height;
 if(width1<width && height1<height){
  obj.width=width1;
  obj.height=height1;
 }else{
  if(h>w){
   obj.height=height;
   obj.width=width1*height/height1;
   
  }else{
   obj.width=width;
   obj.height=height1*width/width1;
  }
 }
 if(height>obj.height) obj.style.marginTop=Math.round((height-obj.height)/2)+ 'px'
}

发布时间:2016年1月4日 | 评论:0 | 浏览: | 标签:Javascript  图片缩放  JS特效  

«1»