如何用CSS实现图片填充动态缩放父Div并居中？附Pug代码

嘿，刚好做过类似的需求，给你一套靠谱的CSS方案，完美适配你说的动态缩放父容器场景！

第一步：让图片容器撑满父Div空间 #

首先得确保包裹图片的a标签完全占满父Div的可用空间，给它加这些样式：

.eventlist-column-thumbnail.content-fill {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

简单解释下：

• display: block：把a标签从行内元素转成块级，才能正常设置宽高
• width: 100% + height: 100%：让容器完全填满父Div的空间
• overflow: hidden：避免图片超出容器后乱跑，只保留容器范围内的部分

第二步：给图片设置自适应填充的核心样式 #

这是实现效果的关键，给img标签加下面的样式，完全替代你原来写的inline style：

.eventlist-column-thumbnail.content-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心！保持图片比例，填满容器，裁剪多余部分 */
  object-position: center; /* 让图片居中显示，裁剪时优先保留中间区域 */
}

重点属性说明：

• object-fit: cover：这个属性会让图片维持原有宽高比例，同时完全填满容器，超出的部分自动裁剪，不会出现拉伸变形的情况
• object-position: center：确保图片在容器里始终居中对齐，不管父容器怎么缩放，都显示图片的核心区域
• 可以删掉你原来的float:left和position: static，现在用块级布局+object-fit就足够了

结合你的Pug代码调整 #

你的Pug结构不用大改，只需要去掉img标签里的inline style就行：

article.eventlist-event.eventlist-event--upcoming.eventlist-event--hasimg.eventlist-hasimg.eventlist-event--multiday 
  a.eventlist-column-thumbnail.content-fill(href=`${link}`) 
    img(src=`${img_src}`, alt=`${img_src}`)

额外兼容提示 #

如果需要兼容IE这类旧浏览器，可以用降级方案：把img换成背景图，给容器设置background-size: cover和background-position: center。不过现在大部分现代浏览器都支持object-fit，优先用上面的方案更简洁直观。

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