“自动填充边框”指图片在固定容器内无留白、不拉伸、边缘对齐且边框样式可控，需通过CSS的border+object-fit:cover实现，禁用已废弃的img border属性。
图片广告“自动填充边框”不是指让图片自己长出边框，而是让广告图在给定容器内**无留白、不拉伸、边缘对齐、边框样式可控**地展示——这本质是「容器约束 + 图片适配 + 边框渲染」三者协同的问题。直接用 img 的 border 属性无效（HTML5 已废弃），必须靠 CSS 控制。
为什么 img border="1" 不起作用还报错？
HTML5 明确废弃了 img 标签的 border 属性。浏览器会忽略它，或在 DevTools 中标为“invalid HTML”。即使渲染出来，也无法控制样式（颜色、圆角、虚线等），更不能响应式适配高清屏。所有边框逻辑必须移交 CSS。
- 检查 HTML 源码：如果看到
<img src="ad.jpg" border="2">，立刻删掉border属性 - 替代方案只有一条路：用 CSS 的
border、box-shadow或outline重写 - 旧项目迁移时，全局搜索
border=并替换为 class（如class="ad-border"），再统一加样式
border + object-fit: cover 是广告图填充边框的黄金组合
广告图常需填满固定尺寸容器（如 300×250 像素广告位），又不能变形、不能留白。这时单靠 width: 100%; height: 100% 会拉伸；只设 width: 100% 又可能高度溢出或顶部/底部露白。必须配合 object-fit。
- 容器（如
<div class="ad-slot">）设固定宽高：width: 300px; height: 250px; -
img设：width: 100%; height: 100%; object-fit: cover; display: block; - 边框加在
img上：border: 2px solid #007bff;（注意三要素缺一不可） - 加
display: block消除 inline 元素默认的底部空白 - 若容器本身有 padding/margin，要额外减去，否则边框会“撑出”容器外沿
高清屏（Retina）下 1px 边框发粗？用 box-shadow 替代
在 MacBook、iPhone 等设备上，CSS 的 1px 常被渲染成物理 2px，导致广告边框比设计稿粗一倍。这不是 bug，是设备像素比（dpr=2）导致的。硬写 border: 0.5px 多数浏览器会向上取整为 1px，无效。
立即学习“前端免费学习笔记（深入）”；
- 稳妥方案：
box-shadow: 0 0 0 1px #e0e0e0;—— 不参与盒模型，不被 dpr 缩放，视觉更准 - 响应式友好方案：
border: 0.0625rem solid #e0e0e0;（1rem = 16px，0.0625rem ≈ 1px，缩放时按比例计算） - 避免用
outline做广告边框：它不支持border-radius，且某些浏览器聚焦时会叠加虚线，干扰广告视觉
广告图带圆角边框但不想裁剪内容？优先用 border-radius + overflow: hidden 组合
很多广告设计要求「圆角容器 + 图片填满 + 边框可见」。直接给 img 加 border-radius 可能失效（尤其当图片宽高不等或使用 auto 时），最稳做法是控制容器。
- 给外层容器（如
<div class="ad-card">）设：border-radius: 8px; overflow: hidden; border: 2px solid #3498db; -
img保持width: 100%; height: 100%; object-fit: cover;，无需额外圆角 - 不用
border-image：它依赖切图、调试成本高，广告位尺寸固定，没必要引入九宫格复杂度 - 注意：如果容器用了
transform（如scale(0.95)），某些旧版 Chrome 下overflow: hidden会失效，此时退回给img直接加border-radius并确保宽高相等
真正难的不是加边框，而是让边框在各种尺寸、DPR、缩放、容器约束下始终稳定出现——这需要你明确区分「谁负责尺寸约束」「谁负责内容适配」「谁负责视觉描边」。广告位越关键，越不能靠猜和试，每个 border 都得有对应的 box-sizing、display 和 object-fit 配套。漏掉任意一环，都可能在某个机型上突然露白或溢出。
