SharePoint 新式页面中的图像大小调整和缩放

现代页面和 Web 部件设计为跨设备完全响应,这意味着 Web 部件中使用的图像将根据显示位置、使用布局以及查看它们的设备以不同方式缩放。 例如,现代页面设计为在移动设备上外观美观,自动图像缩放有助于创建具有吸引力的体验。

跨设备的页面示例

哪些图像大小最适合?

由于响应式页面设计,没有特定的高度或宽度(以像素为单位)可确保图像在设备和布局中保持特定形状。 将自动调整图像的大小和裁剪,以跨各种设备和布局显示最佳结果。 但是,有一些指南可帮助确保图像在页面上外观不错。

查找页面的最佳图像大小取决于以下因素:

  • 纵横比:图像的高度和宽度之间的关系

  • 列布局:页面上的栏类型和数量

  • Web 部件布局:为使用图像的 Web 部件选择的布局

纵横比

纵横比是图像的宽度和高度之间的关系。 它通常以两个数字表示,例如 3:2、4:3 或 16:9。 宽度始终是第一个数字。 例如,16:9 的比率可以是宽度为 1600 像素,高度为 900 像素。 或者,它可以是 1920 x 1080、1280 x 720 或其他可以计算为等于 16:9 的宽度/高度组合。 您可以在联机和某些照片编辑工具中查找纵横比计算器,以帮助确定图像的纵横比。 

纵横比为 16:9 和 4:3 的示例。

在大多数情况下,当布局和设备的纵横比为 16:9 或 4:3 时,现代 Web 部件中的图像效果最佳,具体取决于布局。

列布局

页面可以布局为包含不同列类型和布局的节,例如全角列、一列、两列、三列、三分之一左列和三分之一右列。 预期填充列宽的图像的一般规则是,它们的宽度至少与放置它们时所位于的列的宽度相同。 例如,一列中图像 Web 部件中的图像应至少为 1204 像素宽。 下面是每个列布局的宽度准则:

布局

宽度(以像素为单位)

全宽列

1920

一列

1204

两列

每列 586 个

三列

每列 380 个

左第三列

左列为 380;右侧列为 792

三分之一右列

左列为 792;右侧列为 380

由于页面的响应性,全宽度列中的图像始终以屏幕全宽度显示,且自动高度基于屏幕大小。

放置在其他列布局中的图像高度取决于纵横比。 下面是纵横比为 16:9 和 4:3 的高度/宽度 (向上/向下舍入到最接近的像素) 。 例如,这有助于保持图像的宽度和高度,以适合移动设备进行缩放。

纵横比

布局

16 x 9

宽度 x 高度(以像素为单位)

4 x 3

宽度 x 高度(以像素为单位)

一列

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

Web 部件布局

使用的 Web 部件中的布局也会影响图像缩放方式。 以下示例显示了一列中不同的 Web 部件及其布局,以及每个列中使用的纵横比。

请考虑此图像,其原始纵横比为 16:9:

16_9 图像示例

下面是此图像的示例,显示在一栏页面布局中,在不同的 Web 部件和布局中。

Hero Web 部件

磁贴和图层布局的纵横比如下:

  • 平铺:将 Web 部件的高度缩放为遵循纵横比 8:3,Web 部件内部的图像缩放为 4:3 纵横比。

  • 图层:单个图层缩放为纵横比为 8:3,每个层内的图像缩放为接近 16:9 的纵横比。

  • 在移动设备上,在 16:9 使用移动布局。

下面是"图层"布局中显示的图像示例, (顶部) 和 (布局)

"图层"和"图块"布局中的 Hero Web 部件图像示例

突出显示的内容 Web 部件

16:9 是 Carousel、幻灯片和卡片布局的纵横比。

下面是"幻灯片版式"中显示的图像示例, (顶部) 和卡片 (底部) 。

突出显示的内容 Web 部件图像示例

图像 Web 部件

图像将扩展到包含 Web 部件的部分的宽度。 可以选择使用"图像"工具栏更改纵横比或随意裁剪,或使用调整大小控点放大或缩小图像。

下面是一个示例,显示以 4:3 (蓝色) 图像裁剪标记

以 4:3 显示裁剪标记的图像

图像库 Web 部件

以下纵横比用于不同的布局:

  • 实体布局尊重显示的所有图像的纵横比:16:9、1:1、4:3,等等。 

  • 图块、卡片:4:3

下面是"图块"布局中显示的图像示例 (顶部和) 底部的 (布局)

图像库 Web 部件磁贴和实体布局的示例

新闻 Web 部件 -

根据布局,新闻 Web 部件中的图像可以是 4:3、16:9 或 21:9。 下面是一个顶部故事和一个木马布局中的图像示例。

新闻版式图像示例

页面标题区域

图像在横向或纵横比为 16:9 或更高时以及大小至少为 1 MB 时效果最佳。 此外,请确保将焦点设置为保持图片视图中最重要的部分,尤其是当图片用于缩略图、新闻布局和搜索结果时。

在 (焦点设置为 16:9) 图像的示例。

页面标题区域中 16:9 图像的示例。

页面缩略图

页面缩略图显示在搜索结果、突出显示的内容结果、新闻文章等位置。 默认情况下,缩略图来自页面标题区域,或者来自在页面上按第一顺序排序的 Web 部件 (如页面布局的左上方) 。 可以覆盖默认值并更改页面缩略图。 这样做时,最好使用纵横比为 16:9 的图像。

原始 (16:9 的示例)

突出显示内容 Web 部件中的页面缩略图图像示例

快速链接 Web 部件 

快速链接 Web 部件具有六种不同的布局。 下面是建议的纵横比:

  • 幻灯片、网格、按钮:16:9

  • 压缩、列表、磁贴:1:1、4:3

下面是"紧凑"版式顶部和底部 () 幻灯片版式 (的示例)

快速链接布局中的图像示例

提示: 

  • 将图像添加到页面标题区域或 hero Web 部件时,最好在要始终显示的图像区域中设置焦点。 若要详细了解如何设置这两种方案的焦点,请参阅"更改 Hero Web部件中图像的焦点"和"自定义页面中的标题区域"。

  • 焦点

网站标头图像建议

除了页面之外,你可能还想在扩展布局中添加自定义徽标或图像。 下面是针对这些元素的大小建议。

元素

说明

建议

宽度 x 高度(以像素为单位)

网站徽标

根据上传的设计,非正方形和透明较大徽标

192 x 64 

格式:组连接的站点不允许使用 PNG、JPEG、SVG (SVG)

网站徽标缩略图

如果未上传任何网站徽标或需要方形格式的位置,则使用方形徽标缩略图

此元素是必需的。

64 x 64 

格式:组连接的站点不允许使用 PNG、JPEG、SVG (SVG)

扩展版式网站徽标

扩展的页眉布局具有扩展的网站徽标宽度。

300 x 64p

格式:JPEG、PNG、SVG

扩展布局背景图像

一个可以与扩展头一起使用的新背景图像。

2560 x 164

格式:JPEG、PNG

Need more help?

Expand your skills
Explore Training
Get new features first
Join Microsoft Office Insiders

Was this information helpful?

How satisfied are you with the translation quality?
What affected your experience?

Thank you for your feedback!

×