Creating thumbnails with background-image

[seaweed]

I have a photo gallery up and running and have one last bit to fix. The thumbnails you click on to see the larger image are created like this:

 

  /* The CSS */

  .gallery ul li 
    {
    display:block; 
    width:103px; 
    height:58px; 
    float:left; 
    margin:0 0 5px 7px; 
    }

  .gallery ul li.thumb 
    {
    outline: 1px solid #ffffff;
    margin-right: 3px;
    }

 

  /* The HTML / PHP */

  $photoPath = $row["photoPath"];

  echo "<li class=\"thumb\" style=\"background: url($photoPath);\">

 

The problem is that $photoPath references the larger photo, and the thumbnail ends up being a small

chunk of the upper-left corner of the large photo. How do I force the thumbnail to show the entire photo, just smaller? The size of the large photo compared to the small photo has the exact proportions so it should scale.

 

I tried adding height/width properties to the gallery ul li.thumb class and directly in the html but it didn't work.

 

I don't want to create separate thumbnail images as this gallery is going to be used by a computer-illiterate and they will have a hard enough time getting the one photo re-sized LOL.

 

Any tricks?

[Axeia]

Resizing a background image is impossible, use a normal <img> tag inside the li and set its dimensions to whatever you want.

 

Be warned though that browser image scaling in general looks like crap.

[SuperBlue]

In this case i would say that using img would be the best option, the reason is that you are using this for a gallery.

 

It quite simply doesn't make any sense to use background images. For thumbnails i would recommend that you re-size them on the server, with something like gd-lib. This is easily done if your host supports it. You can then save a thumbnail version along with the full version.

 

Se also: http://uk.php.net/manual/en/function.imagecopyresized.php