js+css中的clip进行的简单的缩略图裁剪

最新推荐文章于 2025-05-28 09:00:00 发布

原创最新推荐文章于 2025-05-28 09:00:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

jquery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何通过JS和CSS实现一张缩略图在不同场景下显示不同比例，同时保持美观性。具体介绍了三种方法：基于phpGD库的图片重绘、基于js+H5中canvas标签的图片拷贝、基于js+css中clip标签进行图片裁剪。特别强调了使用JS的load和complete事件处理图片裁剪，以及如何解决在从缓存中加载图片时不触发事件的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于很多网站来说，都希望缩略图是统一的长宽比例，这样比较方便前台显示。但是如果前台采用瀑布流或者自动排布框架来做的首页，这样就失去了一种美观性。

这时候我们就考虑，如何做到同一张缩略图，模组或者内页中用统一的长宽比显示，而首页用原比例显示

这个其实并不难，大致上有3种解决方式能很简单的完成，基于php GD库的图片重绘、基于 js + H5中 canvas 标签的图片拷贝、基于js + css中clip标签进行图片裁剪（说裁剪，其实只是隐藏了部分图片）

今天我们就从最简单的做法开始，js +clip
代码如下：

<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<style>
.thumb img {
  position: absolute;
  } 
</style>
</head>
<body>
      <div class="thumb"><img src="1.png"></div>
      <div class="thumb"><img src="2.jpg"></div>
      <div class="thumb"><img src="1.png"></div>
</body>
<script>
jQuery(document).ready(function($){
    var $n = 0.618;//设定缩略图 裁剪比例    

    //每次载入完成 缩略图进行css裁切(其实只是隐藏了部分)
    $('.thumb img').load(function(){
        var $height = $(this).width()*$n;//裁剪后目标高度
        var $img_height = $(this).height();//图片高度
        var $clip_height = ($img_height - $height)/2;//裁剪的top
        var $clip_height_2 = $height +($img_height - $height)/2;//裁剪的buttom
        $(this).css("clip","rect("+$clip_height+"px,auto,"+$clip_height_2+"px, auto)");
        $(this).css("margin-top","-"+$clip_height+"px");
        $(this).parent().css("height",$height+"px");//thumb div高度设定为图片裁剪后的高度
    });

});
</script>

但是大家都知道通过load事件处理img的话，如果网页从cache中获取图片是不会触发的，这时候我们就需要用到图片的complete属性了。这个属性代表图片已经加载完成。

<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<style>
.thumb img {
  position: absolute;
  } 
</style>
</head>
<body>
      <div class="thumb"><img src="1.png"></div>
      <div class="thumb"><img src="2.jpg"></div>
      <div class="thumb"><img src="1.png"></div>
</body>
<script>
jQuery(document).ready(function($){
    var $n = 0.618;//设定缩略图 裁剪比例    

    //每次载入完成 缩略图进行css裁切(其实只是隐藏了部分)
    $(".thumb img").one('load', function() {
        var $height = $(this).width()*$n;//裁剪后目标高度
        var $img_height = $(this).height();//图片高度
        var $clip_height = ($img_height - $height)/2;//裁剪的top
        var $clip_height_2 = $height +($img_height - $height)/2;//裁剪的buttom
        $(this).css("clip","rect("+$clip_height+"px,auto,"+$clip_height_2+"px, auto)");
        $(this).css("margin-top","-"+$clip_height+"px");
        $(this).parent().css("height",$height+"px");//thumb div高度设定为图片裁剪后的高度
    }).each(function() {
      if(this.complete) $(this).load();
      //如果已经加载过，我们对图片执行load方法
    });

});
</script>