CSSスケールと四角い中央のクロップ画像

Question

私は200x200のサイズである私のアプリにサムネイルのコレクションを持っています。時には元の画像にこの比率がないので、この画像を正方形に切り抜くことを計画しています。

現在のところ、画像がサムネイルに収まるだけで、元の画像サイズが400x800である場合、画像は非常に盛り上がって見えます。私はこの画像を切り抜き、幅/高さを最短にして正方形に切り抜くようにしたいので、上記の例では400x400にトリミングされます。

これを簡単に行う方法はありますか、それともJSを使用する必要がありますか？

Answer 1

を見てください。このフィドルで

.thumb { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    margin: 5px; 
    border: 3px solid #c99; 
    background-position: center center; 
    background-size: cover; 
} 

、最初の画像は、第二の画像は800x400で、400x800です：誰がこれを見つけた

http://jsfiddle.net/samliew/tx7sf

Answer 2

は、画像の幅が高さよりも大きい場合を処理するように更新されました。

純粋なCSSでこれを行うことができます。各画像のコンテナ要素を高さと幅を固定して設定し、overflow: hiddenに設定します。そして、画像をmin-width: 100%、min-height: 100%に設定します。余分な高さまたは幅がコンテナをオーバーフローして隠されます。

HTML

<div class="thumb"> 
    <img src="http://lorempixel.com/400/800" alt="" /> 
</div> 

CSS

.thumb { 
    display: block; 
    overflow: hidden; 
    height: 200px; 
    width: 200px; 
} 

.thumb img { 
    display: block; /* Otherwise it keeps some space around baseline */ 
    min-width: 100%; /* Scale up to fill container width */ 
    min-height: 100%; /* Scale up to fill container height */ 
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */ 
} 

は、あなたが背景画像を使用する場合は、CSSで簡単に行うことができますhttp://jsfiddle.net/thefrontender/XZP9U/5/

Answer 3

私は私自身の解決策を考え出したと私は場合には、ここでそれを共有するだろうと思いました糸。 background-size：coverソリューションは最も簡単ですが、私はIE7でもうまくいくものが必要でした。ここで私はjQueryとCSSを使って思いついたのです。

注：私の画像は「プロファイル」画像であり、正方形に切り取る必要がありました。したがって、いくつかの関数名。

のjQuery：

cropProfileImage = function(pic){ 
    var h = $(pic).height(), 
     w = $(pic).width(); 

    if($(pic).parent('.profile-image-wrap').length === 0){ 
        // wrap the image in a "cropping" div 
     $(pic).wrap('<div class="profile-image-wrap"></div>'); 
    } 

     if(h > w){ 
      // pic is portrait 
      $(pic).addClass('portrait'); 
      var m = -(((h/w) * 100)-100)/2; //math the negative margin 
      $(pic).css('margin-top', m + '%');  
     }else if(w > h){ 
      // pic is landscape 
      $(pic).addClass('landscape'); 
      var m = -(((w/h) * 100)-100)/2; //math the negative margin 
      $(pic).css('margin-left', m + '%'); 
     }else { 
     // pic is square 
     $(pic).addClass('square'); 
     } 
} 

// Call the function for the images you want to crop 
cropProfileImage('img.profile-image'); 

CSS

.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */ 

.profile-image-wrap { 
     /* whatever the dimensions you want the "cropped" image to be */ 
     height: 8em; 
     width: 8em; 
     overflow: hidden; 
} 

.profile-image-wrap img.square { 
     visibility: visible; 
     width: 100%; 
} 

.profile-image-wrap img.portrait { 
     visibility: visible; 
     width: 100%; 
     height: auto; 
} 

.profile-image-wrap img.landscape { 
     visibility: visible; 
     height: 100%; 
     width: auto; 
}