1
Object-fit 和位置
检测图片填充容器方式的变化：cover、contain、fill 和 object-position 调整。
25 测试用例
图片与 SVG
图片和矢量图形是现代网页设计的核心。损坏的滤镜或修改的 SVG 路径可能从根本上改变视觉标识。Delta-QA 以像素级精度比较这些元素。
我们检测什么
2
CSS 滤镜
监控 blur、brightness、contrast、grayscale、hue-rotate、saturate、sepia 和 drop-shadow 滤镜。
3
SVG 修改
捕获 SVG 路径变化、fill/stroke 颜色修改和 viewBox 调整。
4
Clip-path 变化
检测使用 circle()、ellipse()、polygon() 和 inset() 函数的 clip-path 形状修改。
5
背景图片
跟踪 background-image、background-size、background-position 和 background-repeat 变化。
实际场景
🎯
加载不了的产品图片
一位开发者重新组织了资源文件目录，破坏了部分产品图片的路径。浏览器显示损坏图标或纯文本替代文字。客户看到"photo-produit-123.jpg"而不是产品照片——没人会购买看不到图片的商品。重构改动的是文件结构，不是代码——没人重新视觉测试产品详情页。Delta-QA 对比截图，立刻检测到照片位置出现了损坏图标。
⚠️
溢出的图片
一位开发者为特殊情况修改了 max-width 规则，由于 CSS 级联效应，网站所有图片都失去了尺寸限制。一张 2000px 宽的图片溢出了容器，出现了水平滚动条——布局被破坏，尤其在移动端。开发者测试了他的特殊场景，没检查使用同一规则的其他 15 个模板。Delta-QA 对比截图，高亮溢出的图片和出现的水平滚动条。
💡
改变的宽高比
一位开发者修改了首页横幅容器的尺寸，图片宽高比从 16:9 变成了 4:3。图片被拉伸：人脸变形，logo 被压扁——访客看到的是业余的图片，而不是精心制作的横幅。改动的是容器而非图片——开发者没有检查视觉效果。Delta-QA 对比截图，高亮变形——比例的改变在差异图中清晰可见。