7

クリップを使用してギャラリーのサムネイルを作成しています。残念ながら、クリップは要素が絶対配置されている場合にのみ使用できます。各 img に均等に適用すると、もちろん、このように 1 つの CSS スタイルを使用している間、すべてが相互に配置されます。

.Thumbnails {
    position: absolute;
    height: 105px;
    clip: rect(50px 218px 155px 82px);
}

次に、それらを互いに相対的に配置するにはどうすればよいですか? 基本的な行が欲しいだけです。

4

4 に答える 4

1

純粋なCSSソリューションはお勧めしません。phpThumbなどのライブラリを検討しましたか? そこから、次の css を使用するだけです。

.Thumbnails{float:left}

サムネイルへの参照は、次のようになります。

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" />

その行は基本的に 100x100 のサムネイルを作成し、zc はズーム クロップ (縦横比に合わせてクロップ) を指定し、サムネイル ライブラリはサーバーの負荷を軽減するためにかなり気の利いたキャッシュを行います。

于 2009-07-21T13:12:57.713 に答える
1

以下にいくつかのオプションを示します。

  1. clip プロパティを使用して、オーバーラップを防ぎ、同時にサムネイルを作成できます: http://www.cssplay.co.uk/menu/clip_gallery.html

  2. 負のマージンを使用して画像を互いに分離し、オーバーフローを使用してサムネイルを作成できます: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

于 2011-04-21T19:10:34.700 に答える
0

私はかなりのCSSを実行しましたが、クリップを使用したことや見たことさえありません。誤解されているCSSクリップは、私だけではないことを示唆しています。 Internet Explorerで、そして何人かの人々はそれを間違って使用します。」

だから、クリップでそれをしないでください。それはあなたが位置を取り除くことを可能にします：あなたが認識したようにそれはあなたが望むものではない絶対です。あなたが何をしようとしているのか理解できたら、画像の幅と高さの値に加えて、パディングを設定してください。

.Thumbnails {
  width: 100px;
  height: 100px;
  padding-bottom: 10px;
  padding-right: 10px;
}

（Eric Meyerの「CascadingStyleSheets：The Definitive Guide」には、「クリップの長く複雑な歴史は、現在のブラウザーでは一貫性のない方法で動作し、クロスブラウザー環境では信頼できないことを意味します。」と書かれています。）

于 2009-07-21T04:11:05.047 に答える