css - How to code php function or set parameters to return NO height values for images?

Question

This question comes from this How to proportionally size images to fit dimensions of 200px x 150px thumbnail in css?, but since I feel it`s not a CSS related question anymore I thought I would create a new question. I am trying to proportionally fit images into thumbnails here http://giantmango.com/contest. I tried setting the css img tag to the below, but all images have the size of 200px x 200px. There is not another css line that has 200px as a height. I am suspecting it is something else.

img {
max-height: 150px;
max-width: 200px;
}

This function is called to return the images and thinking it might be this.

<?php 
    $content = get_the_content('Concept');
    $content = apply_filters('the_content', $content);
    list($col_class, $grid_img) = adjust_grid_image(
        $content, 
        $col_w, 
        $gap_w, 
        $max_col, 
        $flg_img_forcelink, 
        $flg_obj_fit
    );
?>
        <div <?php post_class('grid-item ' . $col_class); ?> id="post-<?php the_ID(); ?>">
            <?php if ($grid_img) echo '<div class="grid-image">' . $grid_img . '</div>'; ?>

These are the parameters that I have it set to.

$col_w = 200; // width of grid column
$gap_w = 7;  // padding + margin-right (15+15+5)
$max_col = 5; // max column size (style div.x1 ~ xN)
$flg_img_forcelink = true;   // add/overwrite a link which links to a single post (permalink).
$flg_img_extract = true;    // in single post page, extract thumbnail link to an original image.
$flg_obj_fit = 'large-fit';  // none | small-fit | large-fit ... how to fit size of object tag.

This is the functions.php file that runs adjust_grid_image, but I am unsure of what it is doing. Is this setting my images to 200px x 200px? If so, what parameter must I change in order for it to not hardcode 200px as the height of images so I can set it in the css?

/* 
 * return class name and image tag (resized w/h attributes) to fit a grid.
 */
function adjust_grid_image($content, $col_w, $gap_w, $max_col, $flg_img_forcelink, $flg_obj_fit) {
    global $post;

    $col_class_base = 'x';
    $col_class = $col_class_base . '1'; // default column-width class
    $arr_w = array();
    for ($i=0; $i<$max_col; $i++) {
        $arr_w[] = ($col_w * ($i+1)) + ($gap_w * $i);
    }

    $grid_img = '';
    $w = $h = 0;
    $matches1 = $matches2 = $matches3 = array();

    // search *first* img/object tag
    preg_match('/<(img|object)(?:[^>]+?)>/', $content, $matches1);

    if ($matches1[1] == 'img') {
        preg_match('/<img(?:.+?)src="(.+?)"(?:[^>]+?)>/', $content, $matches2);
        $img_url = ($matches2[1]) ? $matches2[1] : '';
        if ($img_url) {
            // first, try to get attributes
            $matches_w = $matches_h = array();
            preg_match('/width="([0-9]+)"/', $matches2[0], $matches_w);
            preg_match('/height="([0-9]+)"/', $matches2[0], $matches_h);
            if ($matches_w[1] and $matches_h[1]) {
                $w = $matches_w[1];
                $h = $matches_h[1];
            }
            else {
                // ... or get original size info.
                $upload_path = trim( get_option('upload_path') ); 
                $mark = substr(strrchr($upload_path, "/"), 1); // default mark is 'uploads'
                preg_match("#$mark(/.+)$#", $img_url, $split_url);
 // split($mark, $img_url)
                if ($split_url[1] != null) {
                    $img_path = $upload_path . $split_url[1];
                    list($w, $h) = @getimagesize($img_path);
                }
            }
        }

        for ($i=0; $i<$max_col; $i++) { // set new width and col_class
            if ( ($i >= $max_col - 1) or ($w < $arr_w[$i+1]) ) {
                $nw = $arr_w[$i];
                $col_class = $col_class_base . ($i+1);
                break;
            }
        }
        $nh = (!$w or !$h) ? $nw : intval( ($h * $nw) / $w ); // set new height

        $grid_img = $matches2[0];
        // add width/height properties if nothing
        $flg_no_w = (strpos($grid_img_edit, 'width=') === false);
        $flg_no_h = (strpos($grid_img_edit, 'height=') === false);
        if ($flg_no_w or $flg_no_h) {
            $grid_img_close = (substr($grid_img, -2) == '/>') ? '/>' : '>';
            $grid_img_edit = substr( $grid_img, 0, -(strlen($grid_img_close)) );
            $grid_img_edit .= ($flg_no_w) ? ' width="0"' : '';
            $grid_img_edit .= ($flg_no_h) ? ' height="0"' : '';
            $grid_img = $grid_img_edit . $grid_img_close;
        } 
        // replace new width/height properties
        $grid_img = preg_replace('/width="(d+)"/', 'width="'. $nw .'"', $grid_img);
        $grid_img = preg_replace('/height="(d+)"/', 'height="'. $nh .'"', $grid_img);

        // check image link
        //$chk_imglink = '/(<a(?:.+?)rel="(?:lightbox[^"]*?)"(?:[^>]*?)>)'. preg_quote($matches2[0], '/') .'/';
        $chk_imglink = '/(<a(?:.+?)href="(?:.+?.(?:jpe?g|png|gif))"(?:[^>]*?)>)'. preg_quote($matches2[0], '/') .'/';
        if ($flg_img_forcelink) {
            $grid_img = '<a href="'. get_permalink() .'" title="' . esc_attr($post->post_title) . '">' . $grid_img . '</a>';
        }
        else if ( preg_match($chk_imglink, $content, $matches3) ) {
            $grid_img = $matches3[1] . $grid_img . '</a>';
        }
    }
    else if ($matches1[1] == 'object') {
        preg_match('/<object(.+?)</object>/', $content, $matches2);

        $matches_w = $matches_h = array();
        preg_match('/width="([0-9]+)"/', $matches2[0], $matches_w);
        preg_match('/height="([0-9]+)"/', $matches2[0], $matches_h);
        if ($matches_w[1] and $matches_h[1]) {
            $w = $matches_w[1];
            $h = $matches_h[1];
        }
        else {
            $flg_obj_fit = 'none';
        }

        //set col_class (and new width if in '*-fit' condition)
        if ($flg_obj_fit == 'small-fit') {
            for ($i=0; $i<$max_col; $i++) { 
                if ($i >= $max_col -1) {
                    $nw = $arr_w[$i];
                    $col_class = $col_class_base . ($i+1);
                    break;
                }
                else if ( $w < $arr_w[$i+1] ) {
                    $nw = $arr_w[$i];
                    $col_class = $col_class_base . ($i+1);
                    break;
                }
            }
        }
        else if ($flg_obj_fit == 'large-fit') {
            for ($i=$max_col -1; $i>=0; $i--) { 
                if ( $w > $arr_w[$i] ) {
                    if ($i >= $max_col -1) {
                        $nw = $arr_w[$i];
                        $col_class = $col_class_base . ($i+1);
                    }
                    else {
                        $nw = $arr_w[$i+1];
                        $col_class = $col_class_base . ($i+2);
                    }
                    break;
                }
                if ($i == 0) {
                    $nw = $arr_w[$i];
                    $col_class = $col_class_base . ($i+1);
                }
            }
        }
        else {
            for ($i=0; $i<$max_col; $i++) { 
                if ($i >= $max_col -1) {
                    $col_class = $col_class_base . ($i+1);
                    break;
                }
                else if ( $w < $arr_w[$i] ) {
                    $col_class = $col_class_base . ($i+1);
                    break;
                }
            }
        }
        $nh = (!$w or !$h) ? $nw : intval( ($h * $nw) / $w ); // set new height

        $grid_img = $matches2[0];
        if ($flg_obj_fit == 'small-fit' or $flg_obj_fit == 'large-fit') {
            // replace new width/height properties
            $grid_img = preg_replace('/width="(d+)"/', 'width="'. $nw .'"', $grid_img);
            $grid_img = preg_replace('/height="(d+)"/', 'height="'. $nh .'"', $grid_img);
        }
    }

    return array($col_class, $grid_img);
}

Thank you for looking at all of this.

Answer 1

This is some intermediate function. There will be probably some other part in the code which uses the return value from this function and actually outputs HTML. You should locate this part and comment the piece which output the width and height settings.

Pay attention, though, that if your images have variable proportions and you rescale them mantaining these proportions (via CSS), they will not fit in a grid anymore. They will look more scattered on the page than they are now.

EDIT Now that you have added more details, I think it should be enough to remove the section starting with the comment // add width/height properties if nothing