CODEWITHSUNDEEP
htmlgd
Edward Hasted
Edward Hasted

Reputation: 3433

Add transparent border around an Image

I am using phpThumb to overlay a couple of images, this makes use of the GD library. In order for this function to work the images been to be the same size. So when a user uploads an image I have to validate the size. And finally for it to display correctly I need to add a transparent border around the image so the underlaying image is the same size.

So I can't use a CSS approach. I don't know if there is some other GD call that can do this but the web site is currently down (http://www.libgd.org/).

What approach would you recommend to add the transparent border?

Upvotes: 0

Views: 986

Answers (1)

mahsa.teimourikia
mahsa.teimourikia

Reputation: 1774

Margin in css works like a transparent border. But for your problem there are better ways:

First of all if you are using phpThumb you can resize images authomatically, so no need to validate image size:

<?php

    require_once 'path/to/ThumbLib.inc.php';

    try
    {
         $thumb = PhpThumbFactory::create('/path/to/image.jpg');
    }
    catch (Exception $e)
    {
        // handle error here however you'd like
    }
    $thumb->resize(100, 100);
    $thumb->show();
?>

You can find here more details.

I didn't understand exactly why you need a border. But if you want to use overlays on your image no need to add a border to the image to fit the overlay. If you need an overlay on your image you can do something like this:

 <div class="container">
   <img src="path to your image" />
   <span class="overlay"></span>
 </div>

and apply some style:

.container{ // the same size as your image
  width:100px;
  height:100px;
}

.overlay{
   position: absolute;
   top:0;
   left: 0;
   width:100%;
   height:100%;
   background: ...
   ...
}

Upvotes: 1

Related Questions