UD5工具箱
五种填充模式并排对比
工具将 cover、contain、fill、none 和 scale-down 五种 object-fit 模式并排展示在同一界面中。每种模式下方标注了对应的 CSS 属性值，让你一目了然地看到同一张图片在不同填充模式下的表现差异。这种直观的对比方式，远比逐个修改代码并刷新浏览器高效得多。无论你是初次接触 object-fit，还是需要在多种方案中做出选择，这个功能都能帮你快速锁定最佳方案。
拖拽调整 object-position
每张预览图都支持拖拽交互来调整 object-position。你可以直接在图片上拖动来改变图片的定位点，也可以通过输入框精确设置百分比或像素值。拖拽操作提供了即时的视觉反馈，让你凭直觉就能找到最佳的定位位置。对于需要精确对齐的场景（如头像裁剪、产品图居中），这个功能可以省去大量反复调试的时间。
多类型图片源切换
工具内置四种图片来源选项：横版风景照、竖版人像照、正方形图片以及用户上传的自定义图片。不同的原始宽高比会显著影响 object-fit 的实际效果——例如 cover 模式在横版图上裁剪竖向内容，在竖版图上裁剪横向内容。通过切换不同类型的图片，你可以全面评估填充方案在各种场景下的表现，确保最终选择在真实项目中同样适用。
容器尺寸自由调整
你可以通过滑块或输入框自由调整演示容器的宽度和高度。这意味着你可以在任意宽高比的容器中测试填充效果——从宽屏横幅到窄条卡片，从方形头像到竖向海报。工具还提供了常用的方向预设按钮（横向、纵向、方形等），一键切换到常见的布局场景，快速验证你的填充方案在不同容器尺寸下的适应性。
实时 CSS 代码生成
每当你调整填充模式、position 定位或容器尺寸时，工具会实时生成对应的 CSS 代码片段。代码包含了完整的 object-fit、object-position 以及宽高设置，可以直接复制到你的项目中使用。这一功能打通了从"效果预览"到"代码实现"的最后一步，让你无需再从视觉效果反推属性值，大幅提升开发效率。
响应式设计支持
工具界面采用响应式布局，在桌面端和移动端都能良好运行。演示区域会根据屏幕尺寸自动调整排列方式，确保你始终能清楚地看到对比效果。无论你是在办公室的大屏幕显示器上调试，还是在手机上快速预览效果，工具都能提供一致的使用体验。这使得你可以在任何设备上随时进行 CSS 图片填充的验证工作。