0

別の質問があります。PhPなどを使わずに、HTML KickStartを使用しています。純粋な css/js。画像付きのギャラリーがあります。すべての画像には、次のような通常のコードがあります

<div class="gallery">
  <a href="image.jpg"><img src="image_small.jpg" width="160" height="160"></a>
</div>

エフェクトなどで。質問は - 親指を動的にトリミング/サイズ変更して表示する方法は? アイデアは、このようなものを作ることです

<div class="gallery">
  <a href="image.jpg"><img class="thumb" src="image.jpg"></a>
</div>

同じ画像を使用していますが、フォトショップでそれぞれをトリミング/サイズ変更する必要はありません。そうです、数分でそれらを小さくできる「ドロップサイズ」のようなオプションがありますが、それでも、1つの画像を使用できる場合はより便利です(そして自動的にサイズ変更された親指を取得します) 2 つの異なるものよりも。

画像は幅 (または高さ、または両方) 900 ピクセルまでの任意のサイズにすることができるため、親指は次のよう
に
する必要があります。特定のマージン値

オプションはありますか？

4

1 に答える 1

0

次のようなCSSクラスをいくつか作成できます。

.thumb {
    max-width: 900px; 
}

.thumb160px {
    width: 160px; 
    height: 210px;
}

.thumb300px {
    width: 300px; 
    height: 160px;
}

または、次のように、幅などの値を1つだけ設定します。

.thumb160px {
    width: 160px; 
    height: auto;
}

.thumb300px {
    max-width: 300px; 
    height: auto;
}

そして、次のように、これをHTML要素に適用します。

<div class="gallery">
    <a href="image.jpg"><img class="thumb300px" src="image.jpg"></a>
</div>
于 2013-02-20T09:15:28.800 に答える