如何让图片填充父div宽高并居中？Pug代码存在高度填充问题

嘿，我来帮你搞定这个图片适配容器的问题！你现在遇到的情况是图片宽高比和父容器不匹配，只设置width:100%只能铺满宽度，高度没法跟着容器走对吧？试试下面这些方法：

核心方案：用CSS object-fit 属性（推荐） #

这是目前处理图片容器适配最简洁高效的方式，能让图片保持原有宽高比的同时，完全填充父容器的宽高，超出部分自动裁剪，还能控制图片在容器里居中显示。

修改你的Pug代码：

a.eventlist-column-thumbnail.content-fill(href=`${link}`)
  img(src=`${img_src}`, alt=`${img_alt}` style='position: static; float:left; width: 100%; height: 100%; object-fit: cover; object-position: center;')

小提醒：我把alt属性的值改成了${img_alt}，原代码里用图片路径当alt文本不太合适，应该用图片的描述性文字，这样更符合 accessibility 规范哦。

关键属性解释：

• height: 100%：让图片高度强制铺满父容器的高度
• object-fit: cover：保持图片宽高比，等比例缩放图片直到完全覆盖容器，超出容器的部分会被自动裁剪
• object-position: center：确保图片在容器中居中显示（默认值就是center，显式写出来更清晰）

更优实践：抽离CSS类，避免内联样式

内联样式不利于后期维护，建议把样式写到CSS文件里：

.eventlist-column-thumbnail img {
  position: static;
  float: left;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

对应的Pug代码就能简化成这样：

a.eventlist-column-thumbnail.content-fill(href=`${link}`)
  img(src=`${img_src}`, alt=`${img_alt}`)

备选方案：用背景图实现（兼容旧浏览器） #

如果需要兼容不支持object-fit的旧版浏览器（比如IE），可以把图片作为父元素的背景图来实现：

a.eventlist-column-thumbnail.content-fill(href=`${link}` style=`background-image: url(${img_src}); background-size: cover; background-position: center; background-repeat: no-repeat;`)

这种方式不需要<img>标签，直接用<a>标签的背景图填充容器，同样能达到填充且居中的效果。

内容的提问来源于stack exchange，提问作者xiaolingxiao