flex轮播中尺寸动态变化的div内background-image如何始终居中

解决方案 #

核心需要给带背景图的.column元素添加background-position属性，指定背景图始终基于容器中心定位即可实现需求，同时可以优化原有动画逻辑让过渡效果更统一。

具体修改点 #

• 给.column类新增background-position: center center属性，确保背景图中心点始终和容器中心点对齐
• 将过渡效果从JS事件中挪到CSS的.column类定义里，让所有宽度变化都有平滑过渡，避免只有悬停元素有动画的生硬效果
• 可选优化：给列元素统一绑定事件，减少重复代码

修改后的完整代码 #

CSS 代码

.main-body{
  display: flex;
  height: 500px;
}

.column{
  cursor: pointer;
  background-image:url("https://www.basketblog.gr/articleimages/LebronJames_April20212112121212.jpg");
  background-size: cover;
  /* 新增背景居中属性 */
  background-position: center center;
  /* 统一设置过渡效果，仅针对flex属性变化生效，性能更优 */
  transition: flex 0.4s ease;
}

#one{
  flex: 1 0 25%;
}

#two{
  flex: 1 0 50%;
}

#three{
  flex: 1 0 25%;
}

JS 代码（优化版，可替换原有重复逻辑）

const columns = document.querySelectorAll('.column');
columns.forEach(currentCol => {
  currentCol.addEventListener('mouseover', () => {
    columns.forEach(col => col.style.flex = '1 0 25%');
    currentCol.style.flex = '1 0 50%';
  })
})

HTML 代码和原有逻辑一致，无需修改。

修改后无论列的宽度如何动态变化，背景图都会始终保持在容器中心位置，不会出现偏移。

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