SO - Modifying height of images dynamically

http://stackoverflow.com/questions/8783027/height-of-thumbnails-change-dynamically-as-more-are-added-removed-to-fit-into-th

HTML

<button id="add">Add</button><button id="remove">Remove</button>
<div id="container">
    <img src="http://lorempixel.com/600/100" />
    <img src="http://lorempixel.com/600/100" />
    <img src="http://lorempixel.com/600/100" />
    <img src="http://lorempixel.com/600/100" />
    <img src="http://lorempixel.com/600/100" />
</div>

JavaScript

$('#container').on('onimagechange', function() {
    var images = $(this).find('img');
    var height = 400;
    images.each(function() {
        $(this).css('width', '600px');
        $(this).css('height', height / images.length + 'px');
    });
});

$('#add').click(function() {
    $('<img src="http://lorempixel.com/600/100">').appendTo('#container');
    $('#container').trigger('onimagechange');
});

$('#remove').click(function() {
    $('#container').find('img').last().remove();
    $('#container').trigger('onimagechange');
});