拉伸flexbox中不同大小的图像答案

【问题标题】：images with different size in stretch flexbox拉伸flexbox中不同大小的图像
【发布时间】：2022-11-01 16:11:07
【问题描述】：

我有 align-items: stretch flexbox，在这个 flexbox 里面我有图像和一些文本内容。文本内容是静态的，我需要 img 的高度与文本内容的高度相同。当我使用具有不同纵横比的不同图像时，我会在每个图像上看到不同的高度，但我希望所有图像的高度相同。 *请在全屏模式下测试 sn-p 以查看问题

.card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  margin: 20px;
}
.title {
  align-items: center;
  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%;
}

<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>

【问题讨论】：

您可以为 flex 容器提供固定高度，以便子元素继承相同的高度。

标签： html css flexbox

【解决方案1】：

如果您的文本将包含相同的行高，您可以使用 em 测量值，1em 是 rem 文本大小的 1 行，如果您计划每个跨度具有不同的文本内容和行高，您还可以通过为每个图像设置一个类，然后通过这些而不是通用 img 标签更改高度，这意味着您可以更改每个图像的设置，而不是在容器中通用。

.card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  margin: 20px;
}
.title {
  align-items: center;
  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: 7.25em;
}

<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>

【讨论】：

【解决方案2】：

您必须将height 和width 提供给img 的父级。我为此创建了一个 sn-p。

.card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

.title {
  width: 150px
}
.content{
  width: calc(100% - 150px)
}
.title img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

<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>

【讨论】：