Block that simultes images {width: 100%; height : auto} behaviour

Question

I want to create the following layout :

Is a stripe of a variable number of images that have various widths and heights, that are:

• proportional
• scaled at the same height;
• and the sum of their widths are equal to the parent width.

***It's kind of complicated to express myself;

I was wondering if it's possible for a block to simulate the img neat proportion behavior when you set a width to a percentage and it calculates the height of it automagically.

I've made up a diagram that maybe explain better what I want to achieve :

I want for the image to have collectively 100% width of the parent element, scaled with at the same height without loosing their proportion.

I've tried various implementations trying to figure out a way in which I can translate compute a percentage height in css that fills all the width for a block, just how the image behaves when there are {width: 100%; height : auto} properties.

So here is what I've got so far :

Strike #1, tried a simple solution

Problem: 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;
}

<div class="container">
  <div class="image-wrapper">
    <img class="image" src="http://placehold.it/100x200" />
    <img class="image" src="http://placehold.it/300x200" />
    <img class="image" src="http://placehold.it/800x400" />
    <img class="image" src="http://placehold.it/10x80" />
    <img class="image" src="http://placehold.it/800x400" />
  </div>
</div>

Strike #2, display: table anyone ?

Problem: Don't even need to mention it, images are cropped the container size doesn't follow its parent size .

.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;
}

<div class="container-wrapper">
  <div class="container">
    <div class="image-wrapper">
      <div class="item">
        <img class="image" src="http://placehold.it/100x200" />
        </div>
      <div class="item">
        <img class="image" src="http://placehold.it/300x200" />
      </div>
      <div class="item">
        <img class="image" src="http://placehold.it/800x400" />
      </div>
      <div class="item">
        <img class="image" src="http://placehold.it/10x80" />
      </div>
      <div class="item">
        <img class="image" src="http://placehold.it/800x400" />
      </div>
    </div>
  </div>
</div>

***I must say that I am looking for a HTML/CSS solution without the involvement of JavaScript code.

Do you have a clue on how can I approach this ?

Answer 1

So a trick I just came up with is to use the automagic scaling of an image to scale the containing filmstrip div, but hide it with opacity (in a real example, I'd use a transparent .png as well). This sets the height of the filmstrip relative to its width. If you want your filmstrip to be 5:4 or 16:9 or whatever, just change the proportions of the .magic image.

The container inside is then set to be absolutely positioned so it inherits the size of the .magic image.

The images themselves are set to take up the full height of the filmstrip, and are given different widths. The actual image is set with background-image which uses background-size: cover and background-position: center to fill the div.

.filmstrip {
    width: 100%;
    position: relative;
    
    /* just to make it easier to see what's going on */
    border: 1px solid red;
}
.magic {
    width: 100%;
    height: auto;
    display: block;
  
    /* we don't actually want to see this, we're just using it for it's ratio */
    opacity: 0;
}
.contents {
    position: absolute;
    top:  0; bottom: 0;
    left: 0; right:  0;
}
.contents .image {
    height: 100%;
    background-size: cover;
    background-position: center;
    float: left;
    margin-right: 2%;
    
    /* just to make it easier to see what's going on */
    border: 1px solid blue;
    box-sizing: border-box;
}
.contents .wide {
    width: 30%;
}
.contents .narrow {
     width: 10%
}

<div class="filmstrip">
    <img class="magic" src="http://placehold.it/400x100" />
    <div class="contents">
        <div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
        <div class="narrow image" style="background-image: url('http://placehold.it/300x100');"></div>
        <div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
    </div>
</div>

Browser support should be: Chrome 3+, Firefox 3.6+, IE 9+, Opera 10+, Safari 4.1+ which is basically because of the use of background-cover.