AionClaw中图片宽高比不一致导致卡片错位等问题，需通过CSS统一缩放约束：等比缩放用width:100%;height:auto;，固定高容器居中裁切用object-fit:cover;object-position:center;，小屏防溢出需补max-width:100%并避免分栏截断。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在AionClaw中展示多张来源不同的图片时，原始宽高比差异会导致卡片高度参差不齐、网格错位、文字遮挡或留白突兀——这不是UI bug，而是未对图片容器和图像本身施加统一缩放约束所致。
统一图片宽度并保持等比缩放
进入含图片列表的页面（如「数字专家」技能面板或自定义工作流视图）→ 按Cmd+Option+I（Mac）或Ctrl+Shift+I（Windows）唤出DevTools → 切换到「Console」标签页。
粘贴执行以下代码：
const style = document.createElement('style'); style.textContent = `img.card-image, img.skill-icon, img.preview-thumb { width: 100%; height: auto; max-width: 100%; }`; document.head.appendChild(style);
这行代码强制所有带常见类名的图片按容器宽度100%缩放，【height: auto是关键，缺它就会拉伸变形】。执行后刷新页面，观察图片是否不再撑破卡片高度，且主体内容完整可见。
让图片在固定高容器中居中裁切
当设计要求所有卡片高度严格一致（例如技能市场采用200px高卡片），仅靠等比缩放无法对齐视觉重心。
方法一：DevTools临时注入（调试用）
在Console中执行：
const style = document.createElement('style'); style.textContent = `.card-grid > div, .skill-list > li { height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid img, .skill-list img { width: 100%; height: 100%; object-fit: cover; object-position: center; }`; document.head.appendChild(style);
这段样式将父容器设为固定高+Flex居中，并让图片以cover模式填满且始终以中心为锚点裁切——人物脸部、LOGO主体不会被意外切掉。
方法二：持久化写入CSS文件（推荐长期使用）
关闭AionClaw → 进入安装目录：
• macOS路径：/Applications/AionClaw.app/Contents/Resources/app.asar.unpacked/renderer/css/
• Windows路径：C:\Program Files\AionClaw\resources\app.asar.unpacked\renderer\css\
找到main.css或layout.css → 在文件末尾添加相同CSS规则 → 保存 → 重启客户端。
响应式场景下防止小屏图片溢出
第一步：确认图片容器已启用flex-wrap或grid布局
在DevTools「Elements」中定位图片外层容器（通常含class="image-grid"或"card-row"），检查其display属性是否为flex或grid；若为block或inline-block，需先修正布局方式。
第二步：给图片加防溢出兜底
在Console中执行：
document.querySelectorAll('img').forEach(i => { if (!i.style.maxWidth) i.style.maxWidth = '100%'; });
这一步补全缺失的max-width: 100%，避免原始大图（如3840×2160）在手机窄屏下横向撕裂布局。【不加这句，部分旧版卡片组件会在iOS WebView中失效】
第三步：禁用图片被分栏截断
若使用column-count布局，需在图片直接父容器上添加CSS：
break-inside: avoid;
