Flexbox中align-items:stretch下不同比例图片高度统一问题

问题核心：你设置了align-items: stretch的flex容器，但内部图片因自身宽高比和子容器的flex属性，无法和文本内容保持一致高度，导致不同图片高度不一致。

修改方案 #

调整.title和图片的flex相关属性，确保图片容器被拉伸至文本内容高度，同时图片填充容器：

.card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  margin: 20px;
}
.title {
  /* 新增：让.title在card的flex布局中拉伸至满高 */
  align-self: stretch;
  /* 修改：让内部图片能拉伸至.title的高度 */
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.0125em;
  line-height: 1.93rem;
  word-break: break-all;
}
.title img {
  object-fit: cover;
  width: 150px;
  height: 100%;
}

修改说明 #

1. align-self: stretch：强制.title元素在.card的flex布局中，高度与同层级的.content保持一致，确保图片容器的基准高度统一。
2. align-items: stretch：让.title内部的图片能填充整个容器高度，替代原来的center，避免图片因居中限制无法拉伸。
3. object-fit: cover：保证图片在填充容器时，按原有比例裁剪，不会出现变形。

测试代码（HTML保持不变） #

<div class="card">
    <div class="title">
      <img
        src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
        alt="alt"
      />
    </div>
    <div class="content">
      <p class="text-caption grey3--text">2day ago</p>
      <p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
      <p class="ellipsis">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
        quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
        voluptatem ducimus dolores, cum animi tempore veritatis libero
        repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
        beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
      </p>
    </div>
  </div>
  <div class="card">
    <div class="title">
      <img
        src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
        alt="alt"
      />
    </div>
    <div class="content">
      <p class="text-caption grey3--text">2day ago</p>
      <p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
      <p class="ellipsis">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
        quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
        voluptatem ducimus dolores, cum animi tempore veritatis libero
        repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
        beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
      </p>
    </div>
  </div>

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