如何使用CSS Flex实现卡片图片仅垂直悬停展开，避免水平拉伸

嘿，我完全懂你遇到的这个小麻烦——本来想让卡片的图片区域悬停时垂直展开，结果图片看起来像是横向放大/拉伸了，明明卡片宽度没动，这确实让人摸不着头脑！让我帮你拆解一下问题，再给你搞定它的方案。

先搞清楚为啥会有“水平拉伸”的错觉 #

首先得说清楚：你的卡片宽度是固定的12rem，图片设置了width:100%，所以图片并没有真的水平拉伸。你感觉到的“横向缩放/拉伸”，其实是这两个原因导致的视觉错觉：

1. 你用了object-fit:cover，当图片区域的高度增加（通过flex值调整），容器的宽高比发生变化，cover会自动调整图片的裁剪区域，让图片始终填满容器——这个裁剪区域的变化，会让你误以为图片被横向拉伸了。
2. 你给图片加了transition:all 0.5s，连带着一些不需要过渡的属性也在动，放大了这种视觉上的违和感。

另外，你的.picture-section里写了flex-wrap:wrap，但这个元素根本不是flex容器（没加display:flex），这个属性完全无效，先把它删掉吧！

修复方案：让图片只做垂直方向的过渡 #

下面是调整后的完整代码，我会标注关键修改点：

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.card {
  height: 15rem;
  width: 12rem;
  border: 2px solid blue;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 新增：防止图片或文本溢出卡片 */
}

.card .picture-section {
  border: 2px solid black;
  flex: 1;
  min-height: 0;
  transition: flex 0.5s ease; /* 修改：只过渡flex属性，不是all */
  /* 删掉无效的flex-wrap:wrap */
}

.card .picture-section img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-width: 0;
  transition: height 0.5s ease; /* 修改：只过渡height，减少不必要的动画 */
}

.card:hover .picture-section {
  flex: 3;
}

.card .card-text {
  border: 2px solid red;
  flex: 1.5;
  overflow: hidden; /* 新增：防止悬停时文本被挤压溢出 */
}

<div class='cards'>
  <div class='card'>
    <div class='picture-section'>
      <img src = "https://picsum.photos/200/300">
    </div>
    <div class='card-text'>
      <p>Emmanuel Jean Joseph </p>
    </div>
  </div>
  <div class='card'>
    <div class='picture-section'>
      <img src = "https://picsum.photos/200/600">
    </div>
    <div class='card-text'>
      <p>Emmanuel Jean Joseph </p>
    </div>
  </div>
  <div class='card'>
    <div class='picture-section'>
      <img src = "https://picsum.photos/400/300">
    </div>
    <div class='card-text'></div>
  </div>
  <div class='card'>
    <div class='picture-section'>
      <img src = "https://picsum.photos/300/600">
    </div>
    <div class='card-text'></div>
  </div>
  <div class='card'>
    <div class='picture-section'></div>
    <div class='card-text'></div>
  </div>
  <div class='card'>
    <div class='picture-section'></div>
    <div class='card-text'></div>
  </div>
</div>

如果你完全不想有裁剪的视觉变化 #

要是你连裁剪区域的变化都不想有，希望图片始终保持原比例完整显示，那可以把object-fit:cover改成object-fit:contain，不过这样容器可能会出现留白。或者换个思路，把图片区域改成flex容器，让图片居中显示，悬停时只放大图片的垂直区域：

.card .picture-section {
  border: 2px solid black;
  flex: 1;
  min-height: 0;
  transition: flex 0.5s ease;
  display: flex;
  align-items: center; /* 垂直居中图片 */
  justify-content: center; /* 水平居中图片 */
  overflow: hidden;
}

.card .picture-section img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.card:hover .picture-section img {
  transform: scaleY(1.3); /* 只垂直放大图片 */
}

这样悬停时，图片只会垂直方向放大，完全不会有横向的视觉变化，你可以根据自己的需求选。

内容来源于stack exchange