css - 可変幅の画像の周りに固定幅の境界線を追加する

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

まずインラインスタイルは避けてください

デモを見る

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

ライブデモ