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

本文介绍了如何通过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>

就是这么简单,加载完页面以后 图片都会裁剪成统一比例显示,但是这有一个严重的问题:隐藏的图片或者隐藏div中的图片是无法读取到高度的,好吧,这种方法还是有严重的受限性,但是不得不说超简单。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值