So I've got the jquery-ui slider working on adjusting the size of my thumbnails, BUT the problem is if the image is portrait, it overflows out of the container…*jquery to the rescue, right? Not quite.

Below is the js and basic css that i'm using. Shouldn't this be applying a different class on each img element based on the height/width values? They're all getting the same class.

Am I needing to do some sort of loop function for this instead?

Code JavaScript:
	$("#thumbnail_size").slider({
		range: "min",
		min: 125,
		max: 250,
		value: 187,
		slide: function (event, ui) {
				var image_width   = $(".project_file_container").find('img').width();
				var image_height  = $(".project_file_container").find('img').height();
				$(".project_file_container").css("width", ui.value + "px");
				$(".project_file_container").css("height", ui.value + "px");
				if (image_width > image_height) {
					$(".project_file_container").find('img').addClass('wide');
				} else {
					$(".project_file_container").find('img').addClass('tall');
				}
			}
	});
Code CSS:
.project_file_container img.wide {width:100%;height:auto;}
.project_file_container img.tall {width:auto;height:100%;}