CODEWITHSUNDEEP
css
Abram
Abram

Reputation: 41884

Add fixed width border around image of varying width

I have a number of images of items on a white background.. Some images are wider than others. I would like to add a border around the images, but want the border to be fixed width (say 100px)

Basically I want to have a variable amount of padding (between image and border) so that image width + padding (left and right) = 100px

Here is the code I'm working with:

    <td style = "vertical-align: middle; border-left:">
      <div style="border: 1px solid #DDDDDD; width:200px; text-align:center">
        <a href="/styles/15"><img alt="blah" class="thumbnail" src="blah" style="vertical-align: middle; border:none; height:65x; text-align:center" /></a>
       </div>
    </td>

Upvotes: 0

Views: 1217

Answers (3)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

First Please avoid inline style

see the demo

Use CSS as : 

.imageBox {border: 1px solid #DDDDDD; width:200px; text-align:center}
.image {vertical-align: middle; border:none; height:65x; text-align:center}

and HTML as :

<td class="imageBox">
    <div >
        <a href="/styles/15"><img alt="blah" class="thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/1/17/MetroLigeroMad_logo_1.png"  /></a>
    </div>
</td>

Upvotes: 1

Alex
Alex

Reputation: 421

You can do it like this:

<div class="imageholder">
   <img src="images/yourpic.jpg">
</div>

What you do next is to put the border on the div. The next thing you have to do is to make the div 100px wide.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi now define this css

img{vertical-align:top;}

Live demo

Upvotes: 0

Related Questions