适应
使用字母盒适应图像到屏幕
如何使用适应
- 1输入图片或视频的原始宽和高。
- 2输入你想放入的目标框宽和高。
- 3查看适配后的尺寸、缩放比例，以及是否需要上下或左右黑边。
什么是等比适配（aspect-fit）缩放？
缩放比 = min(目标宽/原宽, 目标高/原高)；适配宽 = 原宽 × 缩放比；适配高 = 原高 × 缩放比等比适配会在保持原始比例的前提下，把整个内容缩放到能放入目标框内的最大尺寸。
多出来的空间会形成上下黑边（letterbox）或左右黑边（pillarbox）。等比填充（aspect-fill）则相反，会裁切以铺满画面。
「等比适配」（aspect fit / contain）是指**在保持原始宽高比的前提下，把图像完整放进目标框**，结果是目标框内会有留白（letterbox 上下黑边或 pillarbox 左右黑边）。与之相对的是「填充」（cover / fill），会放大图像直到铺满目标框，超出部分被裁掉。**两者的选择取决于：内容完整性重要（用 contain）还是画面铺满重要（用 cover）。**
计算方法：设源宽高为 (w, h)，目标框为 (W, H)，取 **scale = min(W/w, H/h)**（contain）或 **max(W/w, H/h)**（cover）。contain 时结果尺寸 = w×scale × h×scale。以 6000×4000 适配 1920×1080：scale = min(1920/6000, 1080/4000) = min(0.32, 0.27) = 0.27，结果 1620×1080。**CSS 中 object-fit: contain 对应前者，cover 对应后者；background-size 同理。**
| 源尺寸 | 比例 | 适配 1920×1080 | 适配 1080×1920 |
|---|---|---|---|
| 6000 × 4000 | 3:2 | 1620 × 1080 | 1080 × 720 |
| 4000 × 3000 | 4:3 | 1440 × 1080 | 1080 × 810 |
| 3000 × 3000 | 1:1 | 1080 × 1080 | 1080 × 1080 |
| 3840 × 2160 | 16:9 | 1920 × 1080 | 1080 × 608 |
| 1920 × 1080 | 16:9 | 1920 × 1080 | 1080 × 608 |
| 1080 × 1920 | 9:16 | 608 × 1080 | 1080 × 1920 |
| 2048 × 858 | 2.39:1 | 1920 × 804 | 1080 × 452 |
常见分辨率的等比缩放对照
常见问题
fit 和 fill 有什么区别？
fit 保证完整显示、可能留黑边；fill 铺满画面但会裁掉溢出部分。
为什么会出现黑边？
当源与目标宽高比不同时就会出现黑边，目的是保持画面不变形。
等比适配会改变文件分辨率吗？
不会，它只改变源在目标框中的映射方式，不改变源像素本身。
contain 和 cover 怎么选？
**contain（等比适配）**：适合需要看到完整内容的场景——产品图、图表、截图、证件照、证件扫描件。代价是有黑边。**cover（填充裁切）**：适合背景图、头图、视频封面——任何「裁掉一点没关系但不能有黑边」的场景。折中方案是 **cover + 指定焦点**（CSS 的 object-position，如 object-position: center 30% 让人脸在上方时不被裁掉）。**电商产品图务必用 contain**，裁掉商品一角会直接影响转化。
为什么视频上传到平台后有黑边？
因为视频比例与播放器比例不一致。竖屏视频（9:16）在横屏播放器（16:9）里必然有左右黑边；反过来也有。解决办法：① **按目标平台拍摄**（抖音/Reels 拍竖屏，YouTube 拍横屏）；② **如果需要多平台发布**，拍摄时用「安全区构图」——主体放在中间 60% 区域，两边留可裁切余量；③ 有些人会用模糊背景填充黑边（把视频放大模糊后作为背景），效果比纯黑好。**注意平台有时会提供「填充」选项，那实际是裁切而非加黑边。**