在不同宽度的图像周围添加固定宽度的边框

Question

我有许多白色背景上的项目图像。有些图像比其他图像更宽。我想在图像周围添加边框，但希望边框的宽度是固定的（比如 100px）

基本上，我希望有一个可变量的填充（在图像和边框之间），以便图像宽度+填充（左右）= 100px

这是我正在使用的代码：

    <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>

Answer 1

First 请避免内联样式

观看演示

使用 CSS 作为 ：

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

和 HTML 作为：

<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>

Answer 2

嗨，

现在定义这个 css

img{vertical-align:top;}

现场演示

Answer 3

你可以

这样做：

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

接下来你要做的是将边框放在div 上。接下来你要做的是使div 100px宽。