CODEWITHSUNDEEP
htmlcssflexbox
frankly.not.frank
frankly.not.frank

Reputation: 55

Make images and text the same size in a flexbox

So basically I would like to display some pictures on the left and some content on the right, while using a flexbox to make them of the same height.

The result should look something like this:

#div1 {
  width: 100%;
  background-color: black;
  color: white;
  overflow: auto;
  font-size: 1vmax;
  display: flex;
  align-items: center;
}

#div2 {
  padding: 1%;
  display: flex;
  align-items: center;
  flex: 1;
}

#div3 {
  padding: 1%;
  text-align: center;
  white-space: nowrap;
  width: max-content;
}
<div id="div1">
  <div id="div2">
    <!-- Some very big pictures -->
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
    <img src="https://via.placeholder.com/1000/" height="50em" />
  </div>
  <div id="div3"><span>Line 1</span><br /><span>Line 2</span></div>
</div>

However, you can see that in this case the height of the pictures are manually set and isn't the same height as the two-line content on the right.

I hope I can do something like this:

#div1 {
  width: 100%;
  background-color: black;
  color: white;
  overflow: auto;
  font-size: 1vmax;
  display: flex;
  align-items: center;
}

#div2 {
  padding: 1%;
  display: flex;
  align-items: center;
  flex: 1;
}

#div3 {
  padding: 1%;
  text-align: center;
  white-space: nowrap;
  width: max-content;
}
<div id="div1">
  <div id="div2">
    <!-- Some very big pictures -->
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
    <img src="https://via.placeholder.com/1000/" height="1em" />
  </div>
  <div id="div3"><span>Line 1</span><br /><span>Line 2</span></div>
</div>

But apparently setting the height of the images to 1em made it extra-small.

Any ideas how to achieve that?

Upvotes: 0

Views: 2238

Answers (1)

Muhammad Rizwan
Muhammad Rizwan

Reputation: 199

You should use image width instead of height, also use justify-content to parent div

.main-container{
     justify-content:space-between;
}

If you want vertically center according to div height

height: 100%;
display:flex;
flex-direction: column;
justify-content: center;


.main-container{
  width:100%;
  background-color:black;
  color:white;
  overflow:auto;
  font-size:1vmax;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.images-container{
  display:flex;
  align-items:center;
  padding: 1%;
}
.images-container img{
  width: 50px;
}
.text-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1%;
}
<div class="main-container">
  <div class="images-container">
  <!-- Some very big pictures -->
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
    <img src="https://via.placeholder.com/1000/" />
  </div>
  <div class="text-container">
    <span>Line 1</span><br /><span>Line 2</span>
  </div>
</div>

Upvotes: 1

Related Questions