web-dev-qa-db-ja.com

純粋なCSS画像のサムネイル

画像サムネイルのコレクションをグリッドに表示したい。画像にはさまざまなサイズがありますが、サムネイルを特定のサイズに制限したいと思います（200pxワイド、150pxトール]としましょう。

私が見つけたいのは、いくつかの魔法のHTMLマークアップとCSSルールです。

  1. 画像を通常の<img>要素に含めることを許可する
  2. サムネイルが200x150ピクセルのボックスに収まり、縦横比が維持され、オーバーフローするディメンションの中央に配置されるようにします。
  3. JavaScriptや各画像の実際の寸法に関する特定の知識は必要ありません

これが可能かどうかはわかりません。私は次のマークアップで私が欲しいものの（悪い）近似を作ることができます：

<div class="thumb">
    <img src="360x450.jpeg">
</div>

およびCSS：

.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}

この試みはさまざまな方法で破られます。

  1. 縦向きの画像のサイズは正しくなりますが、コンテナの下部からオーバーフローし、垂直方向に中心からずれてトリミングされます。

  2. 幅が広くて短い画像は、ハードコードされたwidthおよびmin-heightルールにより、水平方向にゆがみます。

  3. ただし、ハードコードされたwidthがないと、最小の高さと幅よりも大きい画像はサイズ変更されません。

それがまったく役立つ場合は、私がやろうとしていることを（うまくいけば）説明する例をここに示します：

<img>要素を完全に省略して、代わりにサムネイルをコンテナ要素の中央の背景画像として取得することでこの問題を解決できることはわかっていますが、可能であれば、<img>ページ内の要素。

あなたが提供できるヘルプやアドバイスをありがとう！

編集：理想的なソリューションはIE 6+以降のブラウザで機能するが、 IE 9+およびその他の最新ブラウザ（最近のWebKit、Geckoなど））で動作するソリューションは喜んで受け入れられます。

htmlcssthumbnails
17
Will McCutchen

おそらく、おそらく。

また、おそらく最良のアイデアではありません。ここで克服すべき大きな問題は、サムネイルの向きです。パノラマを扱っている場合はどうでしょうか。確かに、それを縮小すると、非常に背の高いイメージと同様に、見苦しい「押しつぶされた」イメージが作成されます。誰もが4X3または16X9を100％の時間で扱うことはまれです。したがって、画像をパディングするメカニズムが必要になります。比率が正しい場合でも、PhotoshopやGimpなどのプログラムを使用した場合ほどきれいにサイズ変更されません。

この思考プロセスのもう1つの大きな問題は、大きな画像を介して大量の不要なデータをサーバーに送信することです。読み込みに時間がかかり、不必要にDOMがいっぱいになり、全体的にUIエクスペリエンスが抑制されるだけです。

これを回避する方法はいくつかありますが、いずれも純粋なCSSではありません。私はこれを数回、クライアントごとに独自の方法で取り組みました。完全にカスタム化したいクライアントの場合、それはカスタムアップローダーで、iMagick（イメージマジックの一部）を介してサイズを変更し、主要なインタラクティブ機能を備えたアルバム用のカスタムCSS/Javascriptでした。別の例では、 Gallery をバックエンドとして使用し、サムネイルの作成、アップロード、タイトル付け、トリミング、整理を行った後、再フォーマットされた画像がDBからリンクされ、より魅力的な方法で表示されます。さらに問題を回避し、Flickr apiなどを使用して、画像をプルして使用することもできます。

ImageMagickを使用してサムネイルを作成する の要点です

4
bpeterson76

CSS3 background-size追加：containおよびcover。

ライブデモ

  • contain（上の画像）は、アスペクト比を維持しながら画像全体に適合します。何もトリミングされていません。

  • cover（下の画像）は、垂直方向または水平方向（画像に応じて）に含まれている要素を塗りつぶし、残りをトリミングします。

8
drudge
.thumb img {
    max-width: 200px;
    max-height: 150px;
    min-width: 200px;
    min-height: 150px;
}

まあ私は親指のためにあなたがあなたがそれを最大にしたいならあなたはそれを最大にし、あなたがそれを小さくしたいならあなたはそれを大きくし、大きな画像をそれを小さくしたいなら。

1
buhbang

画像が正確にそのサイズでない場合はオーバーフローするので、最小幅ではなく最大幅と高さを設定してください:)

0
cmplieger