CSS-Skalierung und quadratisches Bild zum Zuschneiden in der Mitte

Ich habe also eine Sammlung von Miniaturansichten in meiner App, die die Größe von hat 200×200. Manchmal hat das Originalbild dieses Verhältnis nicht, also plane ich, dieses Bild auf ein Quadrat zuzuschneiden.

Derzeit wird das Bild nur so gestreckt, dass es in das Miniaturbild passt, also sagen wir, meine ursprüngliche Bildgröße ist 400 x 800, dann sieht das Bild sehr zerquetscht aus. Ich wollte dieses Bild so zuschneiden, dass es die kürzeste Breite/Höhe hat, und es dann auf ein Quadrat zuschneiden, also wird es in meinem obigen Beispiel auf a zugeschnitten 400 x 400.

Gibt es eine Möglichkeit, dies einfach über CSS zu tun, oder muss ich dafür eine Art JS verwenden?

Sie können dies einfach in CSS tun, wenn Sie background-image verwenden.

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

In dieser Geige ist das erste Bild 400 x 800, das zweite Bild 800 x 400:

http://jsfiddle.net/samliew/tx7sf

Aktualisiert um Fälle zu behandeln, in denen die Bildbreite größer als die Höhe ist.

Sie können dies mit reinem CSS tun. Stellen Sie das Containerelement jedes Bildes auf eine feste Höhe und Breite ein und overflow: hidden. Stellen Sie dann das Bild ein, das Sie haben möchten min-width: 100%, min-height: 100%. Jede zusätzliche Höhe oder Breite wird den Container überfluten und ausgeblendet werden.

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 */
}

Schau mal rein http://jsfiddle.net/thefrontender/XZP9U/5/

Ich habe mir eine eigene Lösung ausgedacht und dachte, ich würde sie hier teilen, falls jemand anderes diesen Thread findet. Die Lösung background-size: cover ist die einfachste, aber ich brauchte etwas, das auch im IE7 funktioniert. Folgendes habe ich mir mit jQuery und CSS ausgedacht.

Hinweis: Meine Bilder waren “Profilbilder” und mussten auf Quadrate zugeschnitten werden. Daher einige der Funktionsnamen.

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;
 }