1

スライドショーに基づいていくつかの親指を生成する必要があります。このサムは、各スライドの img src から直接/動的に生成されます。

現在、親指ギャラリー用に次のようなコードを生成しています。

<ul id="galThumb">
<li id="thumb0"><img src="path-to-image" title="Image[0]"></li>
<li id="thumb1"><img src="path-to-image" title="Image[1]"></li>
<li id="thumb2"><img src="path-to-image" title="Image[2]"></li>
...
<li id="thumbn"><img src="path-to-image" title="Image[n]"></li>
</ul>

li 要素は、水平線を取得するためにフローティングのままにします。

私の問題は、ユーザーが任意の画像サイズと向きの画像をアップロードでき、親指の側面を正しく制御できないことです。私はすべての親指が特定のサイズを持っている必要があります. たとえば、60x45px。

ユーザーが縦長の画像または比率の異なるその他の画像をアップロードすると、縦長の画像が幅を占め、大きな画像が他の画像よりも高くなる、不規則なサムラインができます。画像をトリミングせずに、同じ高さと幅のつまみを取得するにはどうすればよいですか? それとも、垂直方向に合わせて少しトリミングしますか?

私はここでよく検索し、いくつかの便利なスクリプトを見つけましたが、その目標を達成するものはありません.

4

4 に答える 4

1

jQuery NailThumbが好きです。非常にカスタマイズ可能で使いやすいです。

于 2012-05-21T18:59:19.027 に答える
0

画像を背景として割り当て、CCS3 background-size: cover を使用して親指を完全に埋めることができます。次に、下位互換性のために IE フィルターを使用します。

この記事はそれを最もよく説明しています: http://css-tricks.com/perfect-full-page-background-image/

これには JavaScript は必要ありません。

于 2012-05-21T15:42:16.940 に答える
0

jQueryを使用して、各画像の幅/高さを指定できます。要素をループし、<li>各画像の縦横比を取得し、各画像に同じ高さを設定し、縦横比に従って with を設定します。

于 2012-05-21T15:39:33.537 に答える