Applies ToSharePoint Server Subscription Edition SharePoint Server 2019 SharePoint in Microsoft 365 Office for business SharePoint admin center SharePoint operated by 21Vianet

當您 新增新式頁面至網站時,您可以新增及自訂 網頁元件,這些網頁元件是頁面的建置組塊。 本文將說明如何使用圖像網頁元件。 使用它在頁面上插入圖像,無論是從您的網站、電腦,還是從網路插入圖像。 您可以裁剪、調整大小及取代現有的影像。

新增影像至頁面

新增圖像網頁元件

裁剪您的影像

調整影像大小

拖曳或貼上以取代現有的影像

新增或取代頁面上的影像

在頁面上新增或取代影像最簡單的方法就是拖曳或貼上。 

拖曳以新增影像或取代現有影像

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 執行下列其中一項操作: 若要新增影像,只要將您要使用的影像拖曳到您要放置圖像的區段即可。若要取代影像,請按兩下要取代的影像,然後將新影像拖曳至影像。

您可能需要視需要調整影像大小或重新裁剪影像。

貼上以取代影像

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 複製您要新增或取代現有影像的影像。

  3. 在頁面上,按兩下圖像網頁元件以選取影像。

  4. 按鍵盤上的 CTRL+V

新增圖像網頁元件

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 將滑鼠停留在現有網頁元件上方或下方,或在標題區域底下,按一下 [ Circled plus sign used to add a modern web part to a page],然後選取 [圖像 ] 網頁元件。

  3. 從下列其中一個選項中選擇最近使用的影像或影像:

    • Microsoft 提供的影像庫存

    • 網路搜尋

    • 網站

    • 您的電腦

    • 連結

    • 如果貴組織已指定一組核准的影像,您就可以在 [您的組織] 底下選擇該影像集。

      檔案選擇器選項的影像。

      附註: 

      • Web 搜尋會使用 Bing 影像來使用 Creative Common 授權。 在您將影像插入頁面之前,您必須先檢閱影像的授權。

      • 如果您是 SharePoint 管理員,並想要瞭解如何為您的組織建立資產庫,請參閱建立組織資產庫

      • 如果您是 SharePoint 系統管理員,建議您啟用內容傳遞網路 (CDN) ,以改善取得影像的效能。 深入瞭解 CDN

  4. 根據影像的來源) ,按一下 [ 啟] 或 [ 新增 影像 (]。

  5. 您也可以選擇在網頁元件的影像底下輸入標題。

  6. 按一下左側)Web part edit button (編輯 網頁元件 ,即可變更影像、新增影像連結、在影像上新增文字,以及為使用螢幕助讀程式) 的使用者新增或變更替代文字 (。

    圖像網頁元件工具箱

    自動替代文字 當您插入影像時,系統會自動為螢幕助讀程式) 使用者 (替代文字。 在許多情況下,除非您變更或移除文字,否則文字會自動與您的影像一起儲存。 如果影像替代文字的信賴等級不高,您會在影像上看到提醒,讓您檢閱及變更或保留替代文字。

    含有替換文字提示的影像

附註:  SharePoint Server 訂閱版本 和 SharePoint Server 2019 只在編輯網頁元件時支援替代文字。

裁剪您的影像

您可以不使用或不使用預先設定長寬比來裁剪影像。

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 按一下您要變更的影像。 將會顯示編輯影像的工具列。

    影像工具列

    • 1. 長寬比

    • 2. 以免費比例裁剪

    • 3. 復原

    • 4. 重設

    • 5. 預覽 (儲存)

使用長寬比裁剪

裁剪長寬比可讓您決定影像的寬度和高度。 下圖中以藍色框線的區域會顯示 1:1 (方形) 長寬比選取範圍。

長寬比裁剪範例
  1. 按一下 [ 外觀比例] 按鈕 長寬比裁剪按鈕] 。

    其他工具列會飛出,提供不同長寬比的選項。

    長寬比工具

    選取您想要的長寬比。 16:9 是最左邊長寬比選項,後面接著 3:2、4:3 和 1:1。 您會看到預覽方塊,顯示圖片裁剪的方式。 您可以移動圖片中的裁剪方塊來變更裁剪的區域。

    您也可以旋轉裁剪方塊,以變更長寬比方向的顯示方式,方法是按一下 [ 旋轉裁剪框 ] 按鈕 [旋轉裁剪框] 按鈕

  2. 完成後,按一下 [ 儲存 儲存] 。

手動裁剪

免費裁剪範例
  1. 按一下 [ 裁剪可用比例 ] 按鈕 [裁剪不含長寬比] 按鈕 裁剪,而不使用長寬比。 然後拖曳影像每一側的其中一個方塊,讓影像更窄、更寬、更高或更短。

  2. 完成後,按一下 [ 儲存 儲存] 。

調整影像大小

當您處於編輯模式時,您可以選取影像來顯示調整大小控點,或選取影像工具列上的 [ 設大小] 按鈕來調整其大小。 然後拖曳其中一個控點,讓影像變成您要的大小。

調整影像上的控點大小

附註: 

復原或重設

使用 [ 復原 ] 按鈕 復原裁剪 來復原上一個動作。 使用 [ 重設 ] 按鈕 重設影像裁剪 來復原您一次所做的所有變更,將影像傳回您上次儲存之後的狀態。

拖曳或貼上以取代現有的影像

如果您的頁面上有現有的圖像網頁元件,您可以編輯網頁元件並選擇不同的影像來取代影像,或是將新影像拖曳或複製並貼到您要取代的圖像上。 若要貼上,您需要使用鍵盤快速鍵貼上 (CTRL+V) 。 步驟如下:

複製和貼上

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 複製您要取代現有影像的影像。

  3. 在頁面上,按兩下圖像網頁元件以選取影像。

  4. 按鍵盤上的 CTRL+V

拖放

  1. 如果您尚未處於編輯模式,請按一下頁面右上角的 [編輯 ]。

  2. 選取您要取代現有影像的影像。

  3. 在頁面上,按兩下圖像網頁元件以選取影像。

  4. 將影像拖曳到現有影像上方。

附註: 您可能需要視需要調整影像大小或重新裁剪影像。

另請參閱

圖像庫網頁元件

主圖網頁元件

Need more help?

Want more options?

探索訂閱權益、瀏覽訓練課程、瞭解如何保護您的裝置等等。

社群可協助您詢問並回答問題、提供意見反應,以及聆聽來自具有豐富知識的專家意見。