Reply To: Flexbox: same height + aligned to bottom

[grimski]

Thanks @Paulie_D, that’s great!

I have another layout (product index), where I’m trying to make all the items an equal height with flexbox. I’m pretty much there but the image within is getting squashed rather than keeping it’s aspect ratio, have you encountered this before?

The markup would be:

<ul class="products">
<li class="h-product">
<a class="inner">
<img src="" class="u-photo" />
<h2 class="p-name">Name of item</h2>
<p class="e-description">Serves 4-5 people</p>
<span class="p-rating" value="4">Rating: 4 out of 5</span>
<p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>
</a>
</li>
</ul>

The background colour/image is set on the anchor, due to the complexity of the design it has to be that way. So the anchor needs to stretch the height of the list-item as well. I’ll bang it in a CodePen when I get a moment if needed.

Thanks again!