4

ギャラリー用の正方形のサムネイルにうまく収まるように、横向きと縦向きの両方の画像を取得するのに本当に苦労しています。

さまざまな CSS トリックを試しましたが、おそらく Javascript を使用する必要があると思います。

どうすればこれを解決できるか、誰にも分かりますか?

編集 - HTML/CSS は何でもかまいません。現在のところ、親指四角形のクラスで画像を出力するだけです。

<img class="thumb_square" src="/images/uploads/pic.jpg"/>
<img class="thumb_square" src="/images/uploads/pic2.jpg"/>
<img class="thumb_square" src="/images/uploads/pic3.jpg"/>
4

2 に答える 2

6

考えられる解決策の1つ（テスト済み）：各サムネイルをに表示しdivます。cssbackgroundプロパティとを使用してサムネイルを表示centerしno-repeatます。を含むのwidthとを指定する必要があります。幅と高さをすべてのサムネイルの最大幅/高さに設定します。つまり、サムネイルが150px*200pxと200px*150pxの場合、すべてのdivを200px*200pxに設定します。サムネイルは、縦向きまたは横向きの「モード」であるかどうかに関係なく、200px*200pxのボックスの中央に配置されます。heightdiv

例：

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic.jpg') no-repeat center;
   border:1px solid red;">
</div>

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic2.jpg') no-repeat center;
   border:1px solid red;">
</div>

<div style="width:200px; height:200px;
   background: url('/images/uploads/pic3.jpg') no-repeat center;
   border:1px solid red;">
</div>
于 2012-09-02T19:16:52.607 に答える
4

これはまさにあなたが必要としているものだと思います: 画像がどんなに大きくても、全体の高さ (横長の場合) または幅 (縦長の場合) が表示されます。

jFiddle: http://jsfiddle.net/ECRc4/3/

HTML:

<div class="thumb" style="background-image: url('http://placehold.it/250x500')"></div>
<br/>
<div class="thumb" style="background-image: url('http://placehold.it/500x200')"></div>
<br/>
<div class="thumb" style="background-image: url('http://placehold.it/100x200')"></div>

CSS:

.thumb{
    display:inline-block;
    width:100px;
    height:100px;
    background:center;
    background-size:cover;
}
于 2014-03-04T10:04:04.390 に答える