图片铺满容器等比例缩放

快乐打工仔 分类:实例代码

图片铺满容器等比例缩放属于前端实例代码,有关更多实例代码大家可以查看

图片等比例缩放,且能够铺满全屏效果在众多的网站都有使用,因为这是一项必须的基本需求。

最为理想的状态就是图片的长宽比和容器的长宽比是一致的,这样图片经过缩放以后,能够恰好铺满容器,且不变形,但是更多的时候图片的长款比例和容器的长宽比例并不相同,那么再惊醒缩放的时候,难免有一部分会被裁切,这也是不得已而为之,下面就通过代码实例介绍一下如何实现此功能。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.thumbnail{
  overflow:hidden;
  width:200px;
  height:140px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(window).load(function(){
  $('#content div.thumbnail img').each(function(){
    var x=200;
    var y=140;
    var w=$(this).width();
    var h=$(this).height();
           
    var w_original=w;
    var h_original=h;
    h=h*(x/w);
    w=x;
    if(h<y){
      w=w_original*(y/h_original);
      h=y;
    }
    $(this).attr({width:w,height:h});
  });
});
</script>
</head> 
<body>
<div id="content">
 <div class="thumbnail"><img src="mytest/jQuery/antzone.jpg"/></div>
</div>
</body>
</html>

上面的代码实现预期目标,图片能够等比例缩放铺满容器,当然部分内容被裁切,下面介绍一下它的实现过程。

一.代码注释:

(1).$(window).load(function(){}),文档内容加载完毕再去执行函数中的代码,相当于js的window.onload事件。

(2).$('#content div.thumbnail img').each(function(){}),这里采用的each()函数是为了进行批量处理,当然本例子中只有一个图片,如果是大量图片的话,就可以批量处理了。

(3).var x=200,容器的宽度。

(4).var y=140,容器的高度。

(5).var w=$(this).width(),获取图片的实际宽度。

(6).var h=$(this).height(),获取图片的实际高度。

(7).var w_original=w,将图片的实际宽度存储到变量w_original中,以便后续使用,因为在代码中w的值会被改变。

(8).var h_original=h,和上面是同样的道理。

(9).h=h*(x/w);      

   w=x;

   if(h<y){

     w=w_original*(y/h_original);

     h=y;

   }

原理非常的简单,h=h*(x/w)根据宽度的缩放比例获取高度,图片的可以是放大也可能是缩小。w=x,将图片的宽度设置为容器的宽度。if(h<y)判断缩放后的高度是否小于容器的高度,如果大于的话,那么高度被裁切了,符合要求,又因为首先是对宽度进行的缩放,如果高度不够高的话,那就说明高度放大的不够或者缩小的太过分了,那么这个时候就以高度作为缩放参考,那么当高度符合要求的时候,宽度一定也是符合要求的(大于等于容器的宽度)。

(10).$(this).attr({width:w,height:h}),设置图片的尺寸。

二.相关阅读:

(1).each()参阅jQuery each()方法一章节。

(2).attr()参阅jQuery attr()方法一章节。

图片铺满容器等比例缩放,这样的场景在实际项目中还是用的比较多的,关于图片铺满容器等比例缩放就介绍到这了。

回复

我来回复
  • 暂无回复内容