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

首先请避免使用内联样式

请参阅 demo

使用CSS作为：

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

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

Answer 2

你可以这样做：

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

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

Answer 3

您好现在定义此css

img{vertical-align:top;}

的 Live demo 的

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

3 个答案: