images with different size in stretch flexbox

Question

I have align-items: stretch flexbox and inside this flexbox I have image and some text content. text content is static and I need height of img to be as same as height of text content. When I use different imgs with different aspect ratio I see different height on each img but I want the height of all images to be same. *Please test snippet in fullscreen mode to see the problem

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

You can provide a fixed height for the flex container so that the child elements will inherit the same height. — govind_unnikrishnan, Nov 01 '22 at 08:16

score 1 · Answer 1 · answered Nov 01 '22 at 08:10

if your text is going to contain the same line heights, you can use em measurements, 1em being 1 line of rem text size, if you plan on having different text contentss and line heights per span, you could also do this by having a class for each image, and then changing the height through those rather than a universal img tag, meaning you can change settings per image, rather than universally in your container.

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

score 1 · Answer 2 · answered Nov 01 '22 at 08:11

You have to give height and width to the parent of img. I have created a snippet for this.

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

images with different size in stretch flexbox

2 Answers2