I've investigated all of the recommended articles plus they appear to deal with the oposite of the items i must do. rather than an engaged 'DIV' I want the stated container to become fixed in dimensions and also the content of stated container to regulate tall to suit in to the div based off the amount of content. I want results with images, not text though.

particularly, i've got a div that consists of the thumnails of the publish on the 'single page' for wordpress site. I would like the consumer to have the ability to add 20 pictures, or possibly 10, or possibly 100. but regardless of the number of they add, the peak from the thumnails will adjust so that they all squeeze into a pre defined 'div'.

So, quite simply, i want the peak of my pictures to become a area of the peak from the that contains div, divided by the amount of thumnails...i believe

example photos incorporate a pre and post from the effect im searching for: I'm already using jquery to complete some hover animations so there's already a script framework setup. I simply dont understand how to get began doing something similar to this.


This is a code which will modify height of every image to ensure that amount of all height would be the preferred height from the cotainer:

// all image tags inside the container
var images = $('#container').find('img');
// desired height of the container (you can use also data- attribute)
var height = 400;
images.each(function() {
    // let's say 600 is the original width of the image
    $(this).css('width', '600px');
    // modify height of the image
    $(this).css('height', height / images.length + 'px');

HERE is really a working example supporting add/remove and taking advantage of a custom event.

You might do that without javascript using css3 flexbox, however, you would they are only based on Webkit browsers and Opera. Your css would seem like:

#container {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  height: 500px;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;

#container div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;

Here's a good example http://jsfiddle.net/NtVTY/ (javascript is simply for illustration reasons).

But, alas, I would not recommend utilizing it, it is simply a coding exercise :)