I am interested in creating a unique layout that consists of a stripe composed of images with varying widths and heights. These images need to be proportional, scaled at the same height, and collectively have a width equal to the parent element.
However, expressing this concept can be quite complex. I am wondering if it is possible for a block to mimic the behavior of an img element where setting a percentage width automatically calculates the height.
To better illustrate my goal, I have created a diagram which you can view here.
The objective is for the combined width of the images to be 100% of the parent's width while maintaining their proportionate scaling at the same height.
Various attempts have been made to achieve this using CSS properties, but so far, none have fully met the requirements. Here is what I have tried:
Attempt #1: Simple Solution
The issue with this approach is that the container height must be predefined.
.container {
width: 100%;
border: 1px solid black;
height: 50px; /* I would like to say here auto */
}
.image-wrapper {
white-space: nowrap;
height: 100%;
max-width: 100%;
border: 1px dashed gray;
}
.image {
height: 100%;
width: auto;
}
Attempt #2: Display Table Approach
This method presents cropping issues and does not dynamically adjust the container size based on its parent.
.container-wrapper {
width: 40px;
height: 50px;
}
.container {
width: 100%;
border: 1px solid black;
display: table;
height: 100%;
}
.image-wrapper {
display: table-row;
height: 100%;
border: 1px dashed gray;
}
.item {
display: table-cell;
border: 1px solid blue;
width: 100%;
height: auto;
}
.image {
height: 100%;
width: auto;
}
My preference is for an HTML/CSS solution without reliance on JavaScript. Any suggestions on how to approach this challenge?