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

需要更多帮助?

扩展你的技能
了解培训
抢先获得新功能
加入 Microsoft 内部人员

此信息是否有帮助?

你对翻译质量的满意程度如何?

哪些因素影响了你的体验?

是否还有其他反馈?(可选)

谢谢您的反馈意见!

×