Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%):
<div class="image-row">
<img src="1.png">
<img src="2.png">
<img src="3.png">
</div>
How would you go about ensuring that all the images have equal height and together fill the width of the container in a tidy row?
I've experimented with various configurations of flex, inline-block, and nowrap in combination with height:100% or object-fit, but haven't found a solution. I run into issues like distorted aspect ratios, cropping parts of the image, or uneven heights.
In simple terms, it seems straightforward - scale each image individually to a uniform height, then resize them as a group to fit a specified width, all while maintaining their original proportions. Is there a specific limitation in CSS that prevents this from working seamlessly?