純粋なCSS/JQueryのソリューションは、サイズの設定されたdivボックスの異なるサイズの画像を中央に配置/切り抜く

Question

私はわずかに異なるサイズのサムネイルでコミュニティのWebサイトで作業しています。

私はdivボックスを165x165ピクセルに設定しました。

いくつかのフルサイズのサムネイル画像等、165個のピクセル、他の人180、192、205になってしまう

私は何をしたいのは、水平に広くないでdivのボックス内の中央に表示するには、これらを強制常にあります165ピクセルより大きい。したがって、イメージは水平方向に185ピクセル、左に10ピクセル、右に10ピクセルを切り取る必要があります。水平方向に205画素の画像が各面20画素ずつ切り取られます。

残念ながら私はこのためにサーバ側のコードにアクセスすることはできませんので、すべてjavascriptおよび/またはjqueryを実行する必要があります。

私が見る最大の課題は、画像のサイズが常に変化していることです。

Answer 1

overflow:hiddenを<div>に入力し、ブラウザでクリッピングを処理できるようにする必要があります。このような何か：

<div style="width: 165px; height: 165px; overflow: hidden;"> 
    <img ...> 
</div> 

ライブ例：http://jsfiddle.net/ambiguous/M3FzZ/

あなたは、jQueryのでこれを行う必要がある場合：

"DIV-セレクタは" あなたが取得する必要がどのようなセレクタである

$('div-selector').css('overflow', 'hidden'); 

あなたの<div>さん。