サムをどのようにしてサムネイルの内容に合わせて展開するのですか？

Question

私はこの質問（またはこのような質問）が何度も繰り返し尋ねられていることを認識しています。私はこれに慣れていないので、私と一緒にいてください。そして、この不満によって、私はリスト要素の基本的な性質を忘れてしまったかもしれません。ここに私の問題があります...

私は異なるサイズの親指でサムネイルギャラリーを持っています（ページロード時にフォルダから親指を動的にロードしています）。サムネイルギャラリーはulを使用して作成されます。私がilのプロパティをインラインに設定すると、リスト内ではなく背中合わせに実行されるため、liは親指にフィットするように展開されません。 liディスプレイをブロック（またはディスプレイを外す）に戻すと、コンテンツに合わせて展開されます... display：inline-blockを使用すると、liコンテンツのサムがliに収まるように縮小しますが、liはまだイメージ... arg！

サイズを指定せずに内容に合わせて展開するようilに指示する方法を教えてください。

ここに私のCSSです：それはロードした後

.gallery { 
width: 100%; 
cursor: default; 

overflow:hidden; 
} 
.gallery ul { 
list-style:none outside none; 
overflow:hidden; 
} 
.gallery li { 
background: #eee; 
border-color: #ddd #bbb #aaa #ccc; 
border-style: solid; 
border-width: 1px; 
color: inherit; 

margin: 3px; 
padding: 5px; 

display:inline; 
position: relative; 
vertical-align:top; 

overflow:hidden; 
} 

は、ここではコードのサンプルです：

<div class="gallery"> 
<ul> 
    <li><a href="brown.png"><img src="/photos/brown.png" alt="" /></a></li> 
    <li><a href="blue.png"><img src="/photos/blue.png" alt="" /></a></li> 
    <li><a href="light-blue.png"><img src="./photos/light-blue.png" alt="" /></a></li> 
</ul> 
</div> 

私がページを表示するときにだから私は、次のようなものを参照してください。

  __    __ 
< ----| |---- ----| |---- 
< ----|__|---- ----|__|---- 

を

中央のボックスはimg要素を表し、背景の小さな破線の長方形はpaですli要素を貸し出します。 （私は初心者のため、私は写真を投稿できませんでした申し訳ありません）

誰にもアイデアはありますか？

ありがとうございました！

Answer 1

デビット感謝!! - 私はあなたがJS Fiddleに書いたコードを見てみることができませんでしたが、表示をインラインブロックに変更したとき、それは機能しました。真剣に私は最後の百万回の変更のいくつかの時点でインラインブロックを試みたと思った - ああそれは今働く:)ありがとう、返信のために多くの!!!