0

異なるサイズの画像のパネルをすべて同じサイズで表示する最良の方法は何ですか? サイズ変更とトリミングを処理できる単純な Javascript フレームワークはありますか。

たとえば、Pinterest を見ると、すべての画像のサイズが可変であることがわかります (これには jQuery masonry を使用できます)。しかし、このページを見ると、http://pinterest.com/pin/97249673174024268/の画像はすべて同じサイズです。

第一に私の質問は賢明であり、第二にJavascriptライブラリでこれを達成する方法はありますか.

4

2 に答える 2

1

ここのこのプラグインは、さまざまな画像サイズを処理し、必要に応じて配置できます。

于 2012-09-08T15:10:34.690 に答える
1

これを完全に JavaScript で行いたい場合は、ライブラリが不要なほど簡単です。jQuery があれば、さらに簡単になります。

  1. <div>幅と高さを目的のサイズに設定し、「オーバーフロー」を「非表示」に設定し、「位置」を「絶対」または「相対」に設定して、画像を 内に配置します。

  2. 画像のサイズを取得します。

    var imageWidth = $(image).width(),
    imageHeight = $(image).height();

    (JavaScript の Image オブジェクトに読み込まれた場合は、image.widthandから取得することもできますimage.height)

  3. 少し計算して、どれだけ縮小または拡大するかを計算します。

    var widthScale = divWidth/imageWidth, 
    heightScale = divHeight/imageHeight,
    scale = Math.max(widthScale, heightScale),
    newWidth = Math.round(imageWidth*scale),
    newHeight = Math.round(imageHeight*scale);

    基本的に、これは、幅と高さを合わせるために画像をどれだけスケーリングする必要があるかを計算し、2 つのうち大きい方を選択して、画像が一方の側に収まり、もう一方の側にオーバーフローするようにします。

  4. 新しいサイズに合わせて画像のスタイルを設定し、div の中央に配置します。

    $(image).css({
    width: newWidth+'px', 
    height: newHeight+'px', 
    position: 'absolute',
    left: '50%', 
    top: '50%', 
    margin-left: 0-Math.round(newWidth/2)+'px',
    margin-top:  0-Math.round(newHeight/2)+'px'
});

それはそれを行う必要があります！

于 2012-09-08T03:49:11.440 に答える