js+css中的clip進行的簡單的縮圖裁剪
阿新 • • 發佈：2019-02-16
對於很多網站來說，都希望縮圖是統一的長寬比例，這樣比較方便前臺顯示。但是如果前臺採用瀑布流或者自動排布框架來做的首頁，這樣就失去了一種美觀性。
這時候我們就考慮，如何做到同一張縮圖，模組或者內頁中用統一的長寬比顯示，而首頁用原比例顯示
這個其實並不難，大致上有3種解決方式能很簡單的完成，基於php GD庫的圖片重繪、基於 js + H5中 canvas 標籤的 圖片拷貝 、基於js + css中clip標籤進行圖片裁剪（說裁剪，其實只是隱藏了部分圖片）
今天我們就從最簡單的做法開始，js +clip
程式碼如下：
<html>
<head 但是大家都知道 通過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中的圖片是無法讀取到高度的，好吧，這種方法還是有嚴重的受限性，但是不得不說超簡單。