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

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 长宽比的示例。

在大多数情况下, 新式 web 部件中的图像在具有16:9 或4:3 的纵横比时, 在布局和设备上使用时效果最佳, 具体取决于布局。

栏布局

可以使用包含不同列类型和布局的节来布局页面, 例如全角列、一列、两列、三列、第三列和第三列。 需要填充列宽度的图像的一般规则是: 它们的宽度至少与放置它们的列的宽度相同。 例如, 一个列中的图像 web 部件中的图像应至少为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 for 左列;792 x 446 for 右列

380 x 594 for 左列;792 x 594 for 右列

三分之一右列

792 x 446 for 左列;380 x 446 for 右列

792 x 594 for 左列;380 x 594 for 右列

Web 部件布局

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

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

16_9 图像示例

下面是一列页面布局中显示的此图像的示例, 位于不同的 web 部件和布局中。

英雄 web 部件

图块和图层布局的以下纵横比如下:

  • 图块: web 部件的高度缩放为遵循8:3 的纵横比, 并且 web 部件范围内的图像缩放到4:3 的纵横比。

  • 图层: 将单个图层缩放为8:3 的纵横比, 并将每个图层范围内的图像缩放到靠近16:9 的纵横比。

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

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

"图层" 和 "图块" 布局中的英雄 web 部件图像的示例

突出显示的内容 web 部件

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

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

突出显示的内容 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, 具体取决于布局。 下面是一个顶部文章和一个轮播布局中的图像示例。

"新闻" 版式图像示例

页面标题区域

当图像在纵横比中较高或更高, 并且大小至少为 1 MB 时, 图像的显示效果最佳。 此外, 请务必将焦点设置为 "在视图中保留图片的最重要部分", 尤其是在缩略图、新闻版式和搜索结果中使用图片时。

在扬声器上设置焦距点的示例 (原始图像 16:9)。

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

页面缩略图

页面缩略图显示在搜索结果、突出显示的内容结果、新闻文章等的位置。 默认情况下, 缩略图来自页面标题区域或页面上第一个订单中的 web 部件 (如页面布局的左上方)。 你可以替代默认设置并更改页面缩略图。 执行此操作时, 最好使用16:9 纵横比的图像。

示例 (原始图像 16:9)

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

快速链接 web 部件 

"快速链接" web 部件具有六种不同的版式。 下面是推荐的纵横比:

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

  • 紧凑、列表、磁贴: 1:1、4:3

下面是紧凑布局 (顶部) 和幻灯片版式 (底部) 中显示的图像示例

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

提示: 

扩展你的 Office 技能
了解培训
抢先获得新功能
加入 Office 预览体验计划

此信息是否有帮助?

谢谢您的反馈!

谢谢你的反馈! 可能需要转接到 Office 支持专员。

×