在各種寬度的圖像周圍添加固定寬度的邊框

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

在各種寬度的圖像周圍添加固定寬度的邊框

回答

相關問題