横幅广告图居中不拉伸的关键是用background-image+background-size: cover+background-position: center center，并配明确宽高的块级容器；仅设width: 100%或object-fit: cover而无容器约束必然失败。
横幅广告图在自适应布局中居中但不拉伸，关键不是“让图片变大”，而是“让容器控制显示区域、图片按比例缩放并居中裁剪”。直接设 width: 100% 或 object-fit: cover 却不配容器约束，90% 的翻车都发生在这里。
用 background-image + background-size: cover 最稳
这是目前兼容性最好、行为最可控的方案，尤其适合横幅这种装饰性强、内容容错率低的场景。
-
background-image必须写在块级容器上（比如<div class="banner">），不能写在 <code><img>标签里——否则background-size和background-position会失效 - 必须显式设
background-size: cover（不是contain，后者留白；也不是100% 100%，会拉伸） -
background-position: center center是默认值，但建议显式写出，避免某些旧版 Safari 解析异常 - 容器需有明确宽高：宽度通常为
100%，高度建议用min-height（如min-height: 200px）或视口单位（如height: 50vh），避免塌陷
示例：
<div class="banner" style="width: 100%; min-height: 200px; background-image: url('ad.jpg'); background-size: cover; background-position: center;"></div>
<img> + object-fit: cover 要配容器约束
如果必须用 <img> 标签（比如需要 SEO、懒加载或 onerror 替换），object-fit: cover 是核心，但它单独存在毫无意义。
- 父容器必须设
display: block且有明确宽高（同上，min-height比height更安全） -
<img>自身要设width: 100%+height: 100%，否则object-fit不生效 - 必须加
object-position: center，否则不同宽高比下可能偏左/偏上 - 别忘了
overflow: hidden在父容器上——cover是靠裁剪实现的，不隐藏就会溢出
示例：
<div style="width: 100%; min-height: 200px; overflow: hidden;">@@##@@</div>
为什么 text-align: center 和 margin: 0 auto 对横幅无效
这两个方法只解决“水平居中”，完全不管高度适配和拉伸问题，用在横幅上等于没做任何保护。
-
text-align: center作用于父容器时，仅让<img src="ad.jpg" style="max-width:90%">水平居中，但图片原始尺寸仍会撑开容器，小屏上直接溢出 -
margin: 0 auto要求display: block+ 明确width，而横幅宽度是响应式的，写死像素值违背自适应原则 - 两者都不控制垂直方向，也不防拉伸——哪怕你加了
max-width: 100%和height: auto，图片仍会按固有宽高比缩放，导致高度不可控、上下留白失控
真正难的不是写对一行 CSS，而是意识到横幅的本质是「背景层」而非「内容流元素」。用 background-image 思维去设计，比硬套 <img> 标签少踩 80% 的坑。
