通常網(wǎng)站的布局都不是單一的。例如圖像在電腦、平板和智能手機(jī)上可能顯示的形狀是不同的。特別是如果你使用的是全屏圖像，在你必須使用相同的圖像文件的情況下，你的主題可能會(huì)被截?cái)嗷蛲耆笔?#xff0c;或者看起來(lái)很尷尬。

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

使用方法：

1. 計(jì)算圖片的聚焦點(diǎn)

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

困惑了？?Don’t worry, 沒(méi)關(guān)系，在這里有一個(gè)方便的腳本，可以獲取圖片的坐標(biāo)：點(diǎn)擊查看。

2. 在頁(yè)面引入 JS 和 CSS

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

3. 標(biāo)記圖片容器

指定的圖像尺寸和圖像容器聚焦點(diǎn)坐標(biāo)。注：我知道這不是真的應(yīng)該需要指定的圖像尺寸，但我發(fā)現(xiàn)這比從圖像讀取尺寸更可靠。例如：

4. 調(diào)用 FocusPoint 插件

基本的調(diào)用，只需要一行代碼：

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

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

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

在任何時(shí)候，你都可以調(diào)用 adjustFocus 來(lái)重新聚焦圖像：

$('.focuspoint').adjustFocus()

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。