如何在展开卡片Web开发小项目中停止图片放大动画？

问题出在两个关键设置上：

• 原CSS中.panel的transition: all会让背景属性也产生过渡效果，导致图片看起来在放大
• background-size: cover会在面板宽度变化时重新缩放图片以覆盖容器，引发视觉上的放大

修改步骤： #

1. 限制过渡仅作用于flex属性
   将.panel中的过渡规则从all改为只针对flex，避免背景相关属性产生动画：

   -webkit-transition: flex 700ms ease-in;
   transition: flex 700ms ease-in;
   

2. 调整背景尺寸，让图片高度固定填满面板
   将.panel的background-size: cover;改为background-size: auto 100%;，这样图片高度始终匹配面板高度，宽度随图片原始比例自适应，面板展开时会显示图片原本被裁剪的左右部分，而非放大图片：

   background-size: auto 100%;
   

3. 可选：固定背景位置
   保留background-position: center;即可让展开时始终以图片中心为基准显示剩余区域，无需额外修改。

修改后的完整CSS代码： #

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 85vh;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  -webkit-transition: flex 700ms ease-in;
  transition: flex 700ms ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
  position: relative;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

JS和HTML部分无需修改，保持原样即可。修改后，面板展开时只会改变宽度，图片会显示原本被裁剪的区域，不会有放大动画，所有面板的表现都会一致。

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