Bei einem beliebigen Bild möchte ich ein Quadrat aus der Bildmitte zuschneiden und innerhalb eines bestimmten Quadrats anzeigen.

Diese Frage ähnelt der folgenden: CSS-Anzeige eines Bilds , dessen Größe geändert und zugeschnitten wurde , aber ich kenne die Größe des Bildes nicht, sodass ich keine festgelegten Ränder verwenden kann.

Eine Lösung besteht darin, ein Hintergrundbild zu verwenden, das in einem Element zentriert ist, das auf die zugeschnittenen Abmessungen zugeschnitten ist.

Grundlegendes Beispiel

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

Beispiel mit imgTag

Diese Version behält das imgTag bei, damit wir nicht die Möglichkeit verlieren, das Bild per Drag oder Rechtsklick zu speichern. Dank an Parker Bennett für den Deckkrafttrick.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

object-fit/.-position

Siehe unterstützte Browser .

Die CSS3-Bildspezifikation definiert die object-fitund object-positionEigenschaften, die zusammen eine bessere Kontrolle über den Maßstab und die Position des Bildinhalts eines imgElements ermöglichen. Mit diesen wird es möglich sein, den gewünschten Effekt zu erzielen:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="http://placehold.it/200x200" />

Ich suchte nach einer reinen CSS-Lösung mit imgTags (nicht im Hintergrundbild).

Ich habe diesen brillanten Weg gefunden, um das Ziel bei Crop Thumbnails mit CSS zu erreichen :

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

Es ähnelt der Antwort von @Nathan Redblur, ermöglicht aber auch Porträtbilder.

Funktioniert wie ein Zauber für mich. Das einzige, was Sie über das Bild wissen müssen, ist, ob es sich um ein Hoch- oder Querformat handelt, um die .portraitKlasse festzulegen. Daher musste ich für diesen Teil etwas Javascript verwenden.

Versuchen Sie Folgendes: Legen Sie die Abmessungen Ihres Bildausschnitts fest und verwenden Sie diese Linie in Ihrem CSS:

object-fit: cover;

Beispiel mit imgTag aber ohnebackground-image

Diese Lösung behält das imgTag bei, damit wir nicht die Möglichkeit verlieren, das Bild per Drag & Rechts zu speichern, sondern background-imagenur mit CSS zu zentrieren und zuzuschneiden.

Behalten Sie das Seitenverhältnis bei, außer bei sehr hohen Bildern. (Überprüfen Sie den Link)

(Ansicht in Aktion)

Markup

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

CSS

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

Ich habe eine AngularJS-Direktive mit den Antworten von @ Russ und @ Alex erstellt

Könnte 2014 und darüber hinaus interessant sein: P.

html

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

js

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

Geigenlink

Versuche dies:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

Beachten Sie, dass widthund heightwird nur funktionieren , wenn Ihr DOM - Element Layout hat (ein Block angezeigt Element, wie ein divoder img). Wenn dies nicht der Fall ist (z. B. eine Spanne), fügen Sie display: block;die CSS-Regeln hinzu. Wenn Sie keinen Zugriff auf die CSS-Dateien haben, fügen Sie die Stile inline in das Element ein.

Es gibt eine andere Möglichkeit, das Bild zentriert zuzuschneiden:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

Das einzige, was Sie benötigen, ist das Hinzufügen der Klasse "vertikal" zu vertikalen Bildern. Sie können dies mit diesem Code tun:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

Hinweis: "! Important" wird verwendet, um mögliche Attribute für Breite und Höhe des img-Tags zu überschreiben.