在各种宽度的图像周围添加固定宽度的边框

我有一些白色背景上的项目图像..有些图像比其他图像宽。我想在图像周围添加边框，但希望边框的宽度固定（例如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>

来源

2012-10-08 Abram

你想要的'100px的一个'border';'？ –

是的，所以图像两边的空白空间，直到边框 – Abram

没有得到你的问题.. –

首先请避免内嵌样式

看到demo

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

来源

2012-10-08 09:58:39 Champ

谢谢，这是一个冠军的答案 – Abram

你可以这样说：

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

你做什么旁边就是把边界在div上。接下来你要做的是让div 100px宽。

来源

2012-10-08 07:05:12 Alex

请检查我的代码，谢谢！ – Abram

@Abram我给你做了个jsfiddle来说明它的外观：[link]（http://jsfiddle.net/qvTkj/）。看看你的代码看起来像你想要的高度固定在65px。 – Alex

嗨现在定义这个CSS

img{vertical-align:top;}

Live demo

来源

2012-10-08 07:29:05

在各种宽度的图像周围添加固定宽度的边框

回答

相关问题