Equal Height Images In Flexbox Layout
This is easier to show in an image- http://puu.sh/n8WGw/0b01b020c7.png I want the flex container to shrink as it's doing now, to match the height of the largest image, but I want t
Solution 1:
We do not know what you did really, maybe overused flexbox rules ?
ul {
display: flex;
}
li {
list-style-type: none;
}
img {
height: 100%;/* in flex-child, the tallest will set rythm ... here it's about 200px; + gap height underneath if no reset of display or vertical-align */
}
<ul>
<li>
<img src="http://lorempixel.com/g/400/100/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/400/200/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/300/150/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/400/100/" alt="" />
</li>
</ul>
or if flex set on li
ul {
display: flex;
width: 100%;
padding: 0;
}
li {
flex: 1;
overflow: hidden;
/* img will be cut off */
}
img {
min-height: 100%;/* again , tallest should set the rythm */
min-width: 100%; /* unless one doesn't fit the width */
display: block;
}
<ul>
<li>
<img src="http://lorempixel.com/g/400/100/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/400/200/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/300/150/" alt="" />
</li>
<li>
<img src="http://lorempixel.com/g/200/50/" alt="" />
</li>
</ul>
Post a Comment for "Equal Height Images In Flexbox Layout"