网页容器比例与海报不同,并采用 cover 填充时,原图正确也可能被裁掉人脸或日期。先单独打开原图。如果关键内容本来就在文件里,应检查网页放置方式和裁切规则,不要先认定生成图缺失。
原图和版位分开记录
记录原图宽高,以及手机、桌面容器的比例。标出必须保留的内容,例如上方人脸和下方活动日期。一个“焦点位置”并不总能同时保护两处。
MDN 说明 object-fit: cover 在保持图像比例的同时填满容器,比例不一致时会裁切;contain 则保留整张对象并可能留空,object-position 控制对齐位置。MDN:object-fit、MDN:object-position。
用几何解释为何移位置也没用
假设原海报为 1200×1800,网页位置却是 1200×400。按宽度放入时,1800 个纵向像素里只有 400 个能进入窗口。上下挪动窗口,无法同时显示纵向距离超过这段高度的两个必需细节。
这是示意计算,不是浏览器实测。它解释了为什么反复微调焦点,也可能永远达不到要求。更合适的决定可能是换一种批准裁图、提高容器高度,或允许整图显示。
给版位做有意的候选
以下是尚未执行的网页审校方案。先展示完整批准海报,再与真实版位中的三种明确选择比较:整图显示、批准裁切、另做适合该位置的构图。
不要为了同时塞下四角就把图像拉扁。如果缩略裁图不再显示日期,应在旁边可见的网页文字中提供准确日期,核对整体信息仍然完整。也不能为让缩略图整齐,就悄悄改掉原图里的日期。
给页面实施者一份简短说明:容器比例、受保护主体、允许不允许裁切,以及准确活动信息放在哪里。目标是解决实际布局,不是寻找一个所有图片都通用的百分比位置。
必须在真实页面验收
用窄手机、中间宽度与桌面三个状态检查页面,并单独打开浏览器实际请求的图像资源。通过条件是受保护内容仍然存在,或按批准方案在可见布局其他位置得到明确提供,同时人物没有被拉伸。
只有桌面预览正确、某个断点丢了关键内容,或拿低清截图代替批准主图,都应判为失败。特别是日期与人脸分别处于上下端时,应把两者同时纳入检查,不能只记录“焦点正确”。
Imagild 可以提供视觉素材或新的批准构图。CSS 填充和响应式放置属于网站实现,单纯提高下载分辨率,无法解决不相容的裁切几何。