SharePoint 新式頁面中的影像大小和縮放

SharePoint 新式頁面中的影像大小和縮放

新式頁面與網頁元件的設計目的是讓整個裝置都能完全回應,這表示在網頁元件中使用的影像會根據其顯示位置、所使用的版面配置,以及要查看的裝置而有所不同。 例如,新式頁面是在行動裝置上看起來很美觀,自動影像縮放可協助建立這種引人注目的體驗。

跨裝置的頁面範例

影像大小的最佳效果為何?

由於回應式頁面設計,不會有特定的高度或寬度(以圖元為單位),以確保影像在各個裝置和版面配置中都能維持特定的圖形。 在各種不同的裝置和版面配置中,影像會自動調整大小並裁切,以顯示最佳的結果。 不過,有一些指導方針可協助您確保影像在頁面上看起來更美觀。

針對您的頁面尋找最佳的影像大小,取決於下列因素:

  • 長寬比:影像的高度與寬度之間的關聯

  • 欄佈局:頁面上的欄類型和欄數

  • 網頁元件版面配置:您針對使用影像之網頁元件所選擇的版面配置

長寬比

[長寬比] 是圖像寬度和高度之間的關聯。 通常會以兩個數字(例如3:2、4:3 或16:9)來表示。 Width 永遠是第一個數位。 舉例來說,16:9 的比例可能是寬度乘以高度900圖元的1600圖元。 或者,可能是 1920 x 1080、1280 x 720,或任何其他可計算為等於16:9 的寬度/高度組合。 您可以在線上和部分相片編輯工具中找到長寬比計算機,協助您決定影像的長寬比。 

16:9 與4:3 長寬比的範例。

在大多數情況下,現代網頁元件中的圖像在具有16:9 或4:3 的長寬比(視版面配置而定)時,可在版面配置和裝置上發揮最佳效果。

欄版面配置

您可以使用包含不同欄類型和版面配置的區段來配置頁面,例如全形欄、一欄、兩欄、三欄、三分之一向左和第三個數據行。 如果影像要填滿欄的寬度,一般規則就是它們所放置的欄的寬度至少為寬度。 例如,在一個欄中,影像網頁元件中的影像的寬度必須至少為1204圖元。 以下是每個欄版面配置的寬度準則:

版面配置

以圖元為單位的寬度

全形欄

1920

一欄

1204

兩欄

每欄586

三欄

每欄380

三分之一左欄

左列的 380;右列的792

三分之一右列

左列的 792;右列的380

由於頁面的回應性特性,全形欄中的圖像將永遠會以螢幕大小自動顯示您畫面的全形,而不會以自動高度為基礎。

放置在其他欄版面配置中的影像高度會視您的寬高比而定。 以下是16:9 和4:3 長寬比(向上/向下舍位到最接近的圖元)的高度/寬度指導方針。 例如,若要以適當的寬度和高度來保留影像,以適合行動裝置的寬度和高度,這會很有説明。

長寬比

16 x 9

4 x 3

一欄

1204 x 677

1204 x 903

兩欄

586 x 330

586 x 439

三欄

380 x 214

380 x 285

三分之一左欄

380 x 446 (適用于左欄);適用于右列的 792 x 446

380 x 594 (適用于左欄);適用于右列的 792 x 594

三分之一右列

792 x 446 (適用于左欄);適用于右列的 380 x 446

792 x 594 (適用于左欄);適用于右列的 380 x 594

網頁元件版面配置

您使用的網頁元件中的版面配置也會影響影像的比例。 下列範例顯示不同網頁元件及其在一欄內的版面配置,以及每個專案所使用的長寬比。

請考慮此影像的原始長寬比為16:9:

16_9 影像範例

以下是在單一欄的版面配置(在不同網頁元件和版面配置中)中顯示此影像的範例。

[英雄網頁元件]

磚與圖層版面配置的下列方位比例為:

  • 磚:網頁元件的高度會調整為遵循8:3 的長寬比,且網頁元件中的圖像會縮放至4:3 的長寬比。

  • 圖層:個別的圖層會縮放至8:3 的長寬比,以及每個圖層中的圖像會縮放至接近16:9 的長寬比。

  • 在行動裝置上,16:9 會使用輪播版面配置。

以下是圖層版面配置(上方)和磚版面配置(底端)中顯示的圖像範例

圖層和磚版面配置中的 [英雄網頁元件] 圖像範例

醒目提示的內容網頁元件

16:9 是輪播、電影膠片和卡片版面配置的長寬比。

以下是電影膠片版面配置(上方)和卡片版面配置(底端)中顯示的影像範例。

醒目提示的內容網頁元件圖像範例

圖像網頁元件

影像會展開為包含網頁元件的節的寬度。 您可以選擇使用 [圖像工具列] 變更長寬比或自由手寫裁剪,或使用調整大小控點來放大或縮小影像。

以下是在4:3 中顯示影像裁剪標記(藍色線條)的範例

在4:3 顯示裁剪標記的影像

影像庫網頁元件

下列長寬比會在不同的版面配置中使用:

  • 磚版面配置會考慮顯示所有影像的長寬比:16:9、1:1、4:3 等。 

  • 磚、卡片:4:3

以下是顯示在磚版面配置(top)和磚版面配置(下)的影像範例

影像庫網頁元件的磚和磚版面配置範例

新聞網頁元件-

視版面配置而定,「新聞」網頁元件中的圖像可以是4:3、16:9 或21:9。 以下是最上層文章和輪播版面配置中的影像範例。

新聞版面配置圖像範例

[頁面標題] 區域

當影像在橫向或16:9 或更大的時間比率中,影像的外觀最佳,且其大小至少為 1 MB。 此外,請務必將焦點設為在視野中保持圖片最重要的部分,尤其是在縮圖、新聞版面配置和搜尋結果中使用圖片時。

在喇叭上設定焦距點的範例(原始影像16:9)。

[頁面標題] 區域中的16:9 影像範例。

頁面縮圖

頁面縮圖會顯示在搜尋結果、醒目提示的內容結果、新聞文章等的位置。 根據預設,縮圖是來自頁面標題區域,或是頁面上第一個順序中的網頁元件(例如頁面版面配置的左上方)。 您可以覆寫預設值並變更頁面縮圖。 當您這麼做時,最好使用16:9 長寬比的影像。

範例(原始影像16:9)

在醒目提示的內容網頁元件中顯示頁面縮圖圖像的範例

快速連結網頁元件 

[快速連結] 網頁元件有六種不同的版面配置。 以下是建議的長寬比:

  • [電影]、[格線]、[按鈕]:16:9

  • 精簡、清單、磚:1:1、4:3

以下是精簡佈建(上方)和電影膠片版面配置(底部)中顯示影像的範例

[快速連結] 版面配置中的圖像範例

提示: 

附註:  本頁面是經由自動翻譯而成,因此文中可能有文法錯誤或不準確之處。 讓這些內容對您有所幫助是我們的目的。 告訴我們這項資訊是否有幫助? 這裡是供您參考的英文文章

增進您的 Office 技巧
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與我們的其中一個 Office 支援專員連絡以深入了解您的意見。

×