[HuggyBear]

Im trying to vertically align images in my image block, example here:

http://cpsdirect.co.uk/product_info....oducts_id=4992

The images are scaled automatically on the fly to fit the size of the box , but how do I align the image vertically central to the 250x250 box?

vertical-align doesnt work
margin-top:auto;
margin-bottom:auto;

doesnt work either, any ideas?

TIA

S

[HuggyBear]

anyone?

Is it really as hard as it looks?

[Peter W]

I'm really no expert, but try "valign=middle" in your HTML.

[HuggyBear]

Yeah, I tried that, doesnt work tho :sad1:

[tommy]

Sorry huggy I have been looking into this for the past 2-3 hours and I can not find anyway of doing unless you was to re-write a large chunk of code.

I think the main reason is you are scaling down the images. I will looking into a DOM modification but I can not guarantee anything.

[HuggyBear]

Originally Posted by tommy

Sorry huggy I have been looking into this for the past 2-3 hours and I can not find anyway of doing unless you was to re-write a large chunk of code.

I think the main reason is you are scaling down the images. I will looking into a DOM modification but I can not guarantee anything.

But they are scaled down before being sent to the visitors browser

PHP Code:

function tep_image($src, $alt = '', $width = '', $height = '', $params = '') {

  // if no file exists display the 'no image' file
  if (!is_file($src)) {
  $src = "images/no_image.jpg";
  }
    // Set default image variable and code
    $image = '<img src="' . $src . '"';
    // Don't calculate if the image is set to a "%" width
    if (strstr($width,'%') == false || strstr($height,'%') == false) {
        $dont_calculate = 0;
    } else {
        $dont_calculate = 1;
    }
    // Dont calculate if a pixel image is being passed (hope you dont have pixels for sale)
    if (!strstr($image, 'pixel')) {
        $dont_calculate = 0;
    } else {
        $dont_calculate = 1;
    }
    // Do we calculate the image size?
    if (CONFIG_CALCULATE_IMAGE_SIZE && !$dont_calculate) {
        // Get the image's information
        if ($image_size = @getimagesize($src)) {
            $ratio = $image_size[1] / $image_size[0];
            // Set the width and height to the proper ratio
            if (!$width && $height) {
                $ratio = $height / $image_size[1];
         $width = intval($image_size[0] * $ratio);
      } elseif ($width && !$height) {
                $ratio = $width / $image_size[0];
                $height = intval($image_size[1] * $ratio);
            } elseif (!$width && !$height) {
                $width = $image_size[0];
                $height = $image_size[1];
            }
            // Scale the image if not the original size
            if ($image_size[0] != $width || $image_size[1] != $height) {
                $rx = $image_size[0] / $width;
                $ry = $image_size[1] / $height;
                if ($rx < $ry) {
                    $width = intval($height / $ratio);
                } else {
                    $height = intval($width * $ratio);
                }
        
       // $image = '<img src="product_thumb.php?img=' . $src . '&amp;w=100&h=100"';
                $image = '<img src="product_thumb.php?img=' . $src . '&amp;w=' .
                tep_output_string($width) . '&amp;h=' . tep_output_string($height) . '"';
            }
        } elseif (IMAGE_REQUIRED == 'false') {
            return '';
        } 


I don;t know if you understand PHP or not but that is the script that creates the thumbs and then stores them in a directory so it doesnt have to create that thumb again,

I have tried changing CSS anmd everything and the only thing that gets the images away from the top is to set margin-top to a fixed height which is no good...

[tommy]

Originally Posted by HuggyBear

But they are scaled down before being sent to the visitors browser

PHP Code:

function tep_image($src, $alt = '', $width = '', $height = '', $params = '') {

  // if no file exists display the 'no image' file
  if (!is_file($src)) {
  $src = "images/no_image.jpg";
  }
    // Set default image variable and code
    $image = '<img src="' . $src . '"';
    // Don't calculate if the image is set to a "%" width
    if (strstr($width,'%') == false || strstr($height,'%') == false) {
        $dont_calculate = 0;
    } else {
        $dont_calculate = 1;
    }
    // Dont calculate if a pixel image is being passed (hope you dont have pixels for sale)
    if (!strstr($image, 'pixel')) {
        $dont_calculate = 0;
    } else {
        $dont_calculate = 1;
    }
    // Do we calculate the image size?
    if (CONFIG_CALCULATE_IMAGE_SIZE && !$dont_calculate) {
        // Get the image's information
        if ($image_size = @getimagesize($src)) {
            $ratio = $image_size[1] / $image_size[0];
            // Set the width and height to the proper ratio
            if (!$width && $height) {
                $ratio = $height / $image_size[1];
         $width = intval($image_size[0] * $ratio);
      } elseif ($width && !$height) {
                $ratio = $width / $image_size[0];
                $height = intval($image_size[1] * $ratio);
            } elseif (!$width && !$height) {
                $width = $image_size[0];
                $height = $image_size[1];
            }
            // Scale the image if not the original size
            if ($image_size[0] != $width || $image_size[1] != $height) {
                $rx = $image_size[0] / $width;
                $ry = $image_size[1] / $height;
                if ($rx < $ry) {
                    $width = intval($height / $ratio);
                } else {
                    $height = intval($width * $ratio);
                }
        
       // $image = '<img src="product_thumb.php?img=' . $src . '&amp;w=100&h=100"';
                $image = '<img src="product_thumb.php?img=' . $src . '&amp;w=' .
                tep_output_string($width) . '&amp;h=' . tep_output_string($height) . '"';
            }
        } elseif (IMAGE_REQUIRED == 'false') {
            return '';
        } 


I don;t know if you understand PHP or not but that is the script that creates the thumbs and then stores them in a directory so it doesnt have to create that thumb again,

I have tried changing CSS anmd everything and the only thing that gets the images away from the top is to set margin-top to a fixed height which is no good...

my mistake I thought you meant scaling by just changing the width and not creating a totally new thumbnail image.

[HuggyBear]

Originally Posted by tommy

my mistake I thought you meant scaling by just changing the width and not creating a totally new thumbnail image.

Sorry, probably didnt explain it properly...

The script which i use to scroll the images is called ContentSlider can get it from DynamicDrive.com, im thinking it could be something in there...

[SBP]

I vaguely remember something about vertical align not working

A quick search on google ("vertical align") brought this:

http://phrogz.net/CSS/vertical-align/index.html

seems to have all the answers

[HuggyBear]

OK, i kind of got it, not 100% but I that is down to the images themselves - 1 is portrait whereas the rest are landscape...

Thanks for your help guys...

Goes without saying Google really is your friend...