通常網站的布局都不是單一的。例如圖像在電腦、平板和智能手機上可能顯示的形狀是不同的。特別是如果你使用的是全屏圖像，在你必須使用相同的圖像文件的情況下，你的主題可能會被截斷或完全缺失，或者看起來很尷尬。

FocusPoint 這款 jQuery 插件可以確保你的圖像中的任何容器看起來都很棒，它提出了“響應裁剪”的概念，確保你的圖片的重要組成部分被裁剪出來，動態圖像裁剪以填充可用空間又不會裁剪掉圖像的主題部分。

使用方法：

1. 計算圖片的聚焦點

圖像的聚焦點是由X(水平)和Y(垂直)坐標組成。坐標值可以是一個在-1到+1范圍內的任意數字，其中0為中心。 x:-1表示的圖像左邊界，x:1是圖像的右邊界。對于Y軸，y:1是圖像的上邊界，y:1是圖像的下邊界。

困惑了？?Don’t worry, 沒關系，在這里有一個方便的腳本，可以獲取圖片的坐標：點擊查看。

2. 在頁面引入 JS 和 CSS

你需要在頁面中引入 jQuery，FocusPoint 腳本和樣式文件：

3. 標記圖片容器

指定的圖像尺寸和圖像容器聚焦點坐標。注：我知道這不是真的應該需要指定的圖像尺寸，但我發現這比從圖像讀取尺寸更可靠。例如：

4. 調用 FocusPoint 插件

基本的調用，只需要一行代碼：

$('.focuspoint').focusPoint();

目前，可用的配置選項不是很多，但是如果你想在窗口大小變化的時候防止圖像被重新聚焦，可以像這樣：

$('.focuspoint').focusPoint({ reCalcOnWindowResize : false });

在任何時候，你都可以調用 adjustFocus 來重新聚焦圖像：

$('.focuspoint').adjustFocus()

總結

以上是生活随笔為你收集整理的html5前端裁剪图片,FocusPoint.js 实现图片的响应式裁剪的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。