0

画像コンテスト用のアプリを作成しましたが、今達成しようとしているのはそれらの画像を表示することです。私は少し問題に直面しています。

アスペクト比を維持して、画像のサイズを400ピクセル×400ピクセルに変更しました。つまり、1つの画像の幅は400ピクセル、高さは200ピクセルになります。別の画像は、幅100ピクセル、高さ400ピクセルにすることができます。

クライアントアプリは、高さと幅が固定されたグリッドにそれらを配置したいと考えています。

http://jsfiddle.net/tbedf/1/

画像の一部を表示するこのcssトリックがありますが、それを行うと、画像の左隅のみが表示され、その領域で白または黒になる可能性があるため、私には適していません。

私がフェイスブックを見るとき、彼らは画像を揃えてその中心を表示するというかなり良い仕事をしていると思います。

どうすればこれを機能させることができますか？

表示が要求されるサムネイルのサイズは100pxx100pxです。

ありがとう。

4

3 に答える 3

1

このようなものを使用して、オーバーフローを中央に配置して非表示にしないのはなぜですか？

<div style="overflow:hidden;text-align:center;width:100px;height:100px;>
<img src="">
</div>
于 2012-06-14T08:14:48.420 に答える
1

javascriptを使用して各画像を保存widthしてheightから、ループ内の画像に次のスタイルを適用してみてください。

position: absolute;
top: 50%;
margin-top: -1*($height/2); /* $height = stored height of current image */
right: 50%;
margin-right: -1*($width/2);  /* $width = stored width of current image */

適用li時にposition: relative;

私はあなたのためにjQueryデモを作成しました—jsFiddleデモ

jQueryコード：

$(function() {
    var imgs = $('ul > li img');

    $.each(imgs, function(i, img) {
        /* cache variable for better performance */
        var $img = $(img);
        $img.css({
            'margin-top': $img.height()/-2,
            'margin-left': $img.width()/-2
        });     
    });
});​

CSS：

li {
    float: left;
    height: 100px;
    width: 100px;
    overflow: hidden;
    margin: 10px;
    padding: 10px;
    position: relative;
}

li:hover { overflow: visible; }

li img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
}
于 2012-06-14T08:28:02.643 に答える
0 
li { float:left; height:100px; overflow:hidden; margin:10px; padding:10px 10 0;}
li:hover { height:auto; }    ​

これはすべてのサムネイルを100pxx100pxにします

于 2012-06-14T08:42:22.800 に答える