I have five images; each one represents a logo. I have made each one the same height in pixels, but they all have varying widths. I want to display them in a flexbox in such a way that all five images always have the same height relative to each other, and I want them to be able to scale (by the same amount) to fit the space. Right now, each image is a different height, but the same width. I want the opposite: same height/different width. Here is a CodePen showing the problem: https://codepen.io/krishunt/pen/YzoygxP
<div class="container">
<div class="flex-container">
<div><img src="https://www.toprival.com/temp/flexbox-test/one.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/two.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/three.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/four.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/five.webp" /></div>
</div>
</div>
.container {
width:80%;
border:1px solid gray;
padding:30px;
margin: 0 auto;
}
.flex-container {
display: flex;
}
.flex-container > div {
margin: 0 10px;
flex: 1 1 50px;
}
.flex-container > div > img {
width: 100%;
}
To fix your problem you need to first add a height property to .flex-container>div>img to maintain the images aspect ratio. You should also removed the properties in your .flex-container > div block because they are causing problems with the sizing of your image heights. To ensure that a gap still remains between the elements, you can add a gap property to your .flex-container block.
.container {
width: 80%;
border: 1px solid gray;
padding: 30px;
margin: 0 auto;
}
.flex-container {
display: flex;
gap: 1rem; /* Added gap property to ensure spacing */
}
.flex-container>div>img {
width: 100%;
height: auto; /* Added to preserve aspect ratio */
}<div class="container">
<div class="flex-container">
<div><img src="https://www.toprival.com/temp/flexbox-test/one.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/two.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/three.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/four.webp" /></div>
<div><img src="https://www.toprival.com/temp/flexbox-test/five.webp" /></div>
</div>
</div>0