Erstellen Sie einen kreisförmigen Avatar aus einem rechteckigen Bild, wobei Sie die Proportionen beibehalten und nur die Bildmitte verwenden

Ich habe Bilder, die 480 Pixel breit und 640 Pixel hoch sind.

Ich möchte sie mit CSS als Kreise auf einer 150 Pixel breiten Webseite anzeigen. Aber ich möchte die Mitte des Bildes sehen.

Nehmen Sie also 80 Pixel von der Ober- und Unterseite des Originalbildes, um das Quadrat mit dem Bild zu erhalten, das ich sehen möchte. Das möchte ich dann zu einem Kreis machen.

Alles, was ich versuche, dehnt das Bild aus, da die meisten Beispiele darin bestehen, zunächst ein quadratisches Bild zu verwenden.

Kann jemand helfen

Sie können das Bild als Hintergrund eines Elements festlegen und seine Hintergrundgröße auf festlegen cover, und verwenden Sie dann border-radius, um die Kanten abzurunden. Dies funktioniert mit Bildern mit jedem Seitenverhältnis und skaliert das Bild so, dass es den Container ausfüllt, ohne es zu dehnen/verzerren.

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

<div id="avatar"></div>

Eine andere Lösung besteht darin, die Größen für img festzulegen und “object-fit: cover;” zu verwenden. Es macht dasselbe wie “background-size:cover”, ohne mit Hintergrundbildern herumzuspielen.

img {
  object-fit: cover;
  border-radius:50%;
  width: 150px;
  height: 150px;
}

<img src="http://i.stack.imgur.com/Dj7eP.jpg" />

Ich habe es im Beitrag von Chris Nager gefunden. – 1

Bearbeiten: Wie @prograhammer erwähnt, funktioniert dies nicht auf IE. Edge unterstützt es nur auf <img> Stichworte.

Teilweise Unterstützung in Edge bezieht sich auf object-fit nur unterstützen <img> – 2

Bearbeiten 2:
Dies Post von Primož Cigler zeigt, wie man es benutzt Modernizr um eine Fallback-Unterstützung für IE hinzuzufügen, aber in diesem Fall müssen Sie dem Image einen Wrapper hinzufügen.

Wenn das Bild im HTML-Code und nicht als Hintergrundbild vorhanden sein muss

.wrapper {
  width:150px;
  height:150px;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}

<div class="wrapper">
  <img src="http://lorempixel.com/output/business-q-c-640-480-4.jpg" alt="" />
</div>

Eine andere Lösung ist eine einfache CSS-Klasse für das img-Element:

.avatar {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}

Verwendungszweck:

<img class="avatar" src="http://path.to/image.jpg" />