UD5工具箱
快速上手指南
本工具无需注册登录，打开即可使用。以下是详细的操作步骤，帮助你在几分钟内完成图片填充方案的选择与验证。
1选择图片源
页面上方提供了图片源选择区域。你可以从预置的横版风景、竖版人像、正方形图片中选择一个作为演示素材。不同的图片宽高比会呈现不同的填充效果，建议依次尝试三种预置图片，观察它们在同一模式下的差异。如果你有实际项目中的图片，点击"上传图片"按钮选择本地文件，可以在真实素材上验证填充方案。
2设置容器尺寸
在容器设置区域，通过宽度和高度滑块调整演示容器的大小。你也可以直接在输入框中输入精确的像素值。工具还提供了方向预设按钮——点击"横向"、"纵向"、"方形"等按钮可以快速切换到常见的容器比例。容器尺寸的选择应参考你实际项目中的容器大小，这样预览效果才具有参考价值。
3观察五种填充模式对比
页面主体区域会同时展示 cover、contain、fill、none 和 scale-down 五种模式的效果。每种模式下方都标注了 object-fit 的属性值。仔细观察同一张图片在五种模式下的表现：cover 模式会填满容器并裁剪超出部分，contain 模式会完整显示图片并在容器内留白，fill 模式会拉伸图片填满容器，none 模式保持原始尺寸不缩放，scale-down 模式则在 none 和 contain 中选择较小的那个。通过对比，选择最符合你需求的模式。
4调整 object-position
在选定填充模式后，拖动预览图上的定位控制点来调整 object-position。你也可以在下方的输入框中输入具体的百分比值（如 50% 50% 表示居中）。object-position 决定了当图片被裁剪或留白时，哪个部分会被优先保留。例如，对于人物头像，可以将定位点向上移动以确保头部始终在可见区域内；对于风景图，可以将定位点移到画面的焦点区域。
5复制生成的 CSS 代码
当填充方案确定后，在代码展示区域查看工具自动生成的 CSS 代码。代码包含了 object-fit、object-position 以及宽高设置，确保与当前预览效果完全对应。点击"复制"按钮将代码复制到剪贴板，然后粘贴到你的项目样式文件中即可。代码会随着你的每一次调整实时更新，保证你始终拿到最新、最准确的样式代码。
6验证浏览器兼容性
工具页面底部提供了兼容性信息，标注了 object-fit 和 object-position 在各主流浏览器中的最低支持版本。在确定填充方案后，务必确认你的目标用户群体所使用的浏览器版本是否支持。如果需要兼容较旧的浏览器，可以参考工具提供的 polyfill 方案建议，或者选择其他 CSS 技术来实现类似的图片适配效果。