Question

I am a total jquery newb and I have a deadline for this project so please don’t laugh.

I am trying to make this jquery code work:

function resize_images(){
   var def = $(".defx img").height(); // get the desired height

   $(".model").each(function() { // loop through all images inside model divs
       var images = $(this).find("img"); // find the image
       var height = images.height(); // find the image height
       if (height > def){  images.css("height: "+def+"px !important"); } // if the image height is larger than the default add a css rule
   });  
}

Any ideas why it is not working?

Answer 1

You’re only checking the height of the first img. Loop over the images themselves:

function resize_images() {
    var maxHeight = $(".defx img").height();
    $(".model img").each(function() {
        var $this = $(this);
        if ( $this.height() > maxHeight ) {
            $this.css('height', maxHeight);
        }
    });
}