various images in a flexbox container with varying sizes

I am having an issue with align-items: stretch flexbox. Inside this flexbox, I have an image and some static text content. The height of the image varies depending on the aspect ratio of the image, but I want all images to have the same height as the text content. To see the problem, please test the snippet in fullscreen mode.

.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">2days 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">2days 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>

htmlcssflexbox

Answer №1

To maintain consistent line heights in your text, consider using em measurements. One line of text is equivalent to 1em in rem text size. If you anticipate different text contents and line heights within spans, create a class for each image to individually adjust the height. This approach allows for more flexible settings on a per-image basis rather than universally within 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">2 days 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">2 days 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>

Answer №2

Make sure to specify the height and width of the parent element containing the img. To assist you, I have provided a code snippet below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Node.js modules in a frontend HTML file with the help of browserify

I am encountering difficulty using a node.js module on my website with browserify. The example provided only demonstrates how to run a separate JavaScript file, not how to incorporate the node.js module within the .html file itself. This seemingly simple i ...

javascriptjqueryhtmlnode.jsbrowserify

Aligning enlarged text that spills over

Within my html/css application, I have defined a button as a class named .button with specific attributes. Here is a simplified example: .button { width: 120px; height: 30px; line-height: 30px; background: yellow; text-align: center; } <div ...

htmlcsscss-transforms

What is the best way to ensure a div occupies the full height within a grid layout?

https://i.sstatic.net/awwxE.png Looking at the image provided, I am seeking a way to make the top left image occupy the entire height just like the neighboring div in the first row of the grid. Is there a way to achieve this? The desired outcome should b ...

htmlcssvue.jsvuejs3bootstrap-5

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

htmlcssscrollflexbox

Issue with rendering Html Element on FireFox compared to Chrome

Having some trouble with an individual component (a simple dropzone) while testing on Firefox. It seems to work fine on Chrome, and the CSS looks good. Css .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); wi ...

javascripthtmlcss

What is the best way to link buttons to specific drop down sections?

How can I create multiple drop down divs with different content for each button click? JSFiddle: http://jsfiddle.net/maddiwu/xe6xtfqh/ .slide { overflow-y: hidden; max-width: 100%; overflow-x: hidden; max-height: 100vw; /* approximate ...

javascripthtmlcss

Is it possible to add a border to both the tbody and td

I currently have a table that is organized with tbody elements to group rows together. In order to create a grid-like structure, I applied borders to each individual td element within the tbody. However, I also desire to show that the tbodies themselves ar ...

htmlcss

Ensuring Bootstrap form elements are correctly positioned

I am facing an issue with a form in my ASP.NET web application that utilizes Bootstrap. The code snippet in question is as follows: <div class="row mb-2"> <div class="col-sm-4"> ...

htmlwebformsbootstrap-5

Tips on how to dynamically update information with Angular

Looking to dynamically update data when a user selects an option from a dropdown menu using the Angular framework This is what I currently have: <div> <button type="button"> {{tests[0].test}} </button> <ul c ...

javascripthtmlangularjs

Selecting a date in a pop-up

In my PHP application, I have incorporated a date selection feature within a modal dialog. However, when clicking the control, the calendar appears in the left corner of the page and remains visible even after selecting a date. Additionally, clicking elsew ...

htmlcssdatepicker

Steps to generate a new page when submitting a form:

When a form is submitted, I am aiming to generate a fresh page each time. This new page will serve as an order status tracker that will be updated regularly. Essentially, my goal is for users to see a confirmation page for the form submission and have acce ...

javascriptphphtmlforms

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you ...

htmlcss

Stream music from SoundCloud by simply clicking a button on an external source, no need

My post contains an embedded SoundCloud player using the following code: <iframe class="soundcloud_iframe" width="100%" height="166" scrolling="no" frameborder="no" src="'.esc_url('https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcl ...

jqueryhtmlwordpressiframesoundcloud

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Can someone guide me in altering an item within a column? I have basic knowledge of PHP, but I am not a skilled expert in the subject

Hello, I am new to coding and I have a question. I would like to make a correction in the Terminate Reason column by changing the spelling of "Resgned" to "Resigned". Can someone guide me on how to do this? Please refer to the attached image for better und ...

phphtmlsql

Feeling puzzled by the concept of CSS Block Formatting Contexts (BFCs)

In the World Wide Web Consortium (W3C), the concept of Block Formatting Context (BFC) is explained as follows: Within a block formatting context, boxes are arranged one after another in a vertical manner, starting at the top of a containing block. The dist ...

cssblock

Images in a horizontal dropdown selection menu

Currently, I have a traditional select dropdown that is data-bound with Angular. <select class="form-control" ng-model="category"> <option value="work">Work</option> <option value="home">Home</option> <option valu ...

javascripthtmlcssangularjs

The dividers flicker in and out of view

I have a menu with 7 elements, where clicking on an element causes its content to appear by fading in. If another element is clicked, the current content fades out and the new content fades in. I've successfully implemented this concept for 3 of the 7 ...

javascriptjqueryhtmlcss

Unable to reset disabled styling for CSS select box

My Windows 8 app consists of two pages: Page1.html and Page2.html. Page1 references ui-light.css and page1.css, while Page2 references ui-light.css and page2.css. In the ui-light.css file, there is a rule defined for the disabled state of select boxes. I ...

cssselectwindows-8modern-ui

Styling CSS to place an image in between text and background coloring

As I try to replicate a happy accident of mine, which originally occurred during my first attempt at CSS: I was just randomly adding selectors when I stumbled upon this unique layout. However, as I proceeded with rewriting the file, I failed to save the o ...

htmlcss