屏幕适配

如何适配 16:9、16:10 和 21:9 显示器

了解不同显示器为何会裁图,以及何时使用填充、完整显示、模糊填充或专用画面。

阅读时间
阅读约 6 分钟
最近审核
2026年10月4日

图片与显示器比例不同时,除非扭曲图片,否则必须裁剪或留空。正确的适配模式能保护重要主体。

动手实践

将16:9照片放入4:3,对比裁切与留白

准备

以1920×1080照片为例。以下数值基于居中、背景缩放100%的几何关系,图库专用4:3图片可能采用不同构图。

适配模式示意图,并非 Studio 截图。将1920×1080原图居中放入1440×1080区域的示例。 填满: 左右各裁掉240px. 完整显示: 上下各留白135px.

操作步骤

  1. 将新项目设为4:3,使用同一张照片作为背景。记住左右边缘主体的位置。
  2. 填满不会留白,但会裁掉左右部分。在1440×1080区域中,原图左右各裁掉240像素。
  3. 完整显示会缩小为1440×810,上下各留白135px。完整显示加模糊填充会用放大并模糊的背景副本填满留白。
  4. 将时钟放在远离裁切边界的位置,再切换16:9检查。编辑器缩放只改变工作区视图,不会提高输出分辨率。

检查结果

优先保留完整主体时选择完整显示;能够接受边缘裁切、希望无留白时选择填满。

如果结果与预期不同

与示意图不一致时请检查背景缩放和位置。图库不同比例可能使用不同图片,最终应在实际显示器上全屏确认。

适配屏幕后会裁掉多少?

输入图像和显示器的像素尺寸,比较填充与完整显示。计算仅在浏览器内进行,无需上传文件。

填充

显示尺寸
1820.4 × 1024 px
每边裁切(左右 / 上下)
270.2 / 0 px
原图可见面积
70.3%

完整显示

显示尺寸
1280 × 720 px
每边留白(左右 / 上下)
0 / 152 px
原图可见面积
100%

示例:咖啡馆图像按输入比例拉伸,并非您自己图像的预览。

按居中、无旋转、无额外缩放计算。裁切和留白以屏幕像素为单位。此工具不会检测显示器或提高画质。要保留靠近边缘的主体,请选择完整显示。

Studio 实际制作案例

案例2 · 将同一背景适配为4:3

复制第一个案例,用同一图片比较填充与完整显示。不要换成单独的4:3图片,这样才能看出适配方式本身的区别。

这些是2026-09-19在电脑 Chrome 中实际设置并截取的韩语 Studio 界面。时间为截图时刻,实际使用时会实时更新。请结合下方中文说明查看韩语界面。

复现设置

画布
4:3 · 1600 × 1200
时钟中心与宽度
X 400 / Y 480 / W 560 px
背景缩放与位置
100% · X 50% / Y 50%

操作步骤

  1. 先复制项目保留原作,再选择4:3。Studio参考画布为1600×1200。保持背景缩放100%、水平与垂直位置50%。
  2. 填充会铺满画布,但裁掉照片左右部分。当没有留白比保留边缘物体更重要时,可以选择此方式。
  3. 完整显示保留整张照片,上下会出现留白。本例参考画布上下各约150px。如想填满留白,可另外比较完整显示加模糊填充。
4:3 · 填充:裁掉左右部分以铺满画布
4:3 · 填充:裁掉左右部分以铺满画布 · 查看完整尺寸截图 ↗
4:3 · 完整显示:保留原图及上下留白
4:3 · 完整显示:保留原图及上下留白 · 查看完整尺寸截图 ↗

检查结果

时钟保持相对位置,变为X 400、Y 480、W 560。但照片中物体与时钟之间的距离可能改变,需要再次检查。截图展示的是编辑界面,最终全屏效果也应在实际显示器上确认。

为何构图会随屏幕变化?

1920×1080 与 2560×1440 都是 16:9。1920×1200 的 16:10 更高,而 3440×1440 的 21:9 更宽。同一张不变形图片需要裁去不同边缘才能铺满。

填充、完整显示、模糊填充与原始尺寸

  • 填充占满屏幕但可能裁边。
  • 完整显示保留全图但可能留空。
  • 模糊填充在同图柔和放大背景上保留完整原图。
  • 原始尺寸使用素材像素尺寸。

为多种比例制作安全构图

将时钟、文字、面部和重要主体保留在中央安全区。边缘应可扩展或裁剪而不改变含义。超宽展示重要时,专用 21:9 素材最自然。

图片屏保根据显示区域使用预先准备的比例图片和元素布局。部分没有对应图片的比例采用完整显示与模糊填充;边缘仍可能因比例和构图而被裁切。

在一台显示器上测试多种比例

  • 可选择当前屏幕或 16:9、16:10、21:9、4:3、9:16 画布比例。
  • 缩小查看裁剪和画布外路径点。
  • 调整靠近边缘的文字或主体。
  • 最后在目标显示器上实机全屏测试。
SCREENWISP STUDIO

不妨直接尝试操作

ScreenWisp 让您无需账户和上传媒体,就能在浏览器中创建并预览全屏画面。

在 Studio 中创建 ↗