在 flexbox 中使图像和文本大小相同

Question

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?

Answer 1

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>