3

バックグラウンド

ShadowBox jQuery プラグインを使用してビデオ ギャラリーを作成しています。これを行うために、を使用してインライン画像の行を作成していdisplay:inline-blockます。ユーザーは、ビデオと一緒にサムネイル画像をアップロードできます。サムネイルの最大サイズは 240x160 ピクセルです。

私がやりたいことは、各ギャラリーのサムネイル「スロット」の周りに黒い境界線を持ち、ユーザーがアップロードしたサムネイルがその「スロット」内にあるため、ユーザーが 240x160 のサムネイルをアップロードすると、サムネイルが「スロット」を完全に埋めます。小さい画像をアップロードすると、サムネイルは「スロット」に残り、周囲に余分なスペースがあります。

私が今いる場所の例を次に示します: http://jsfiddle.net/shaunp/HvZ5p/

問題は、サムネイルの下に余分なスペースがあり、その理由がわかりません。コードを調べると、画像の下に余分な 5 ピクセルが潜んでいることがわかりますが、それがどこから来ているのかわかりません。画像の下の灰色の部分は、画像のすぐ後ろにある必要があります。これにより、ユーザーが小さいサムネイルをアップロードした場合、その周りに灰色の背景のスペースができますが、何らかの理由で高すぎます。助言がありますか？

HTML

<div class="inline">
    <div class="bg-thumb">
        <div class="cell-thumb">
            <a href="#" rev="#nvcCaption#" class="shadow">
                <img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
            </a>
        </div>
    </div>
    <div class="vcCaption">Caption</div>
</div>
<div class="inline">
    <div class="bg-thumb">
        <div class="cell-thumb">
            <a href="#" rev="#nvcCaption#" class="shadow">
                <img src="http://farm9.staticflickr.com/8330/8135703920_f2302b8415_m.jpg" class="thumbImg" alt="Thumb" />
            </a>
        </div>
    </div>
    <div class="vcCaption">Caption</div>
</div>

CSS

body {
    overflow:hidden;
    margin:0 50px 0 50px;
}
.vcCaption {
    text-align:center;
    font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    color:#000;
    margin-bottom:5px;
}
.inline {
    display:inline-block;   
}
.bg-thumb {
    width:250px;
    height:170px;   
}
.bg-thumb {
    text-align:center;
    display:table;
    margin-bottom:5px;
}
.cell-thumb {
    display:table-cell;
    vertical-align:middle;
    border:5px solid #000;
    background-color:#7f7f7f;
}
.thumbImg {
    max-width:240px;
    max-height:160px;
}
4

4 に答える 4

1

画像はデフォルトでinline-block( http://dev.w3.org/html5/markup/img.html#img-display ) として表示されます。これは、インライン レベル ブロックまたは必要に応じてテキスト行に表示されることを意味します。

font-sizeand/orline-heightをor に設定する0か、この場合は単純にイメージをブロック レベルで表示するように設定します ( display: block;)。

于 2013-08-27T14:41:05.573 に答える
1

アンカータグはデフォルトでインライン要素であり、余分なスペースを与え、ブロック要素に設定し、幅と高さを与えます!

.cell-thumb a {
    display: block;
    width: 240px;
    height: 160px;
}
于 2013-08-27T14:23:27.740 に答える