Block that matches the images {width: 100%; height: auto} behavior

Question

I want to create the following layout:

It is a strip of a variable number of images with different widths and heights, which:

• proportional
• scales at the same height;
• and the sum of their width is equal to the parent width.

*** It is difficult to express oneself;

I was wondering if it is possible for a block to mimic the img behavior of a neat proportion when you set the width as a percentage, and it magically calculates its auto height.

I have compiled a diagram that perhaps better explains what I want to achieve:

I want the image to have a 100% collective width of the parent element, scaled at the same height without losing their share.

I tried various implementations, trying to figure out a way that I can translate the calculation of the percentage height to css, which fills the entire width for the block, how the image works when there are properties {width: 100%; height : auto} {width: 100%; height : auto} .

So here is what I got so far:

Strike # 1, tried a simple solution

Problem: container height must be predetermined.

 .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 any?

Problem: you don’t even need to mention it, the images are cropped, the size of the container does not match 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 have to say that I am looking for an HTML / CSS solution without JavaScript.

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

Answer 1

Take a look at my fooobar.com/questions/313228 / ... in which I made suggestions for making a film strip . He refers to the eleborate Codepen example. You can easily split / add what you need ...

Answer 2

So, the trick I just came up with is to use auto image scaling to scale the containing div filmstrip, but hide it with opacity (in a real example, I would use transparent .png like Well). This sets the height of the diafilter relative to its width. If you want your filmstrip to be 5: 4 or 16: 9 or something else, just change the proportions of the .magic image.

Then the absolute location is set inside the container, so it inherits the size of the .magic image.

The images themselves occupy the entire height of the diafilter and have different widths. The actual image is set using 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 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 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 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 mainly related to the use of background-cover .