CSS Circular Cropping des Rechteckbildes

Ich möchte ein zentriertes kreisförmiges Bild aus einem Rechteckfoto machen. Die Abmessungen des Fotos sind unbekannt. Normalerweise ist es eine Rechteckform. Ich habe viele Methoden ausprobiert:

CSS:

.image-cropper {
    max-width: 100px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 150%; 
    margin: 0 0 0 -20%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}

HTML:

<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

Der Ansatz ist falsch, Sie müssen das border-radiusauf den Container divanstatt auf das eigentliche Bild anwenden .

Das würde funktionieren:

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>

Die object-fitEigenschaft bietet hierfür eine nicht hackige Möglichkeit (mit Bildzentrierung). Es wird seit einigen Jahren in gängigen Browsern (Chrome / Safari seit 2013, Firefox seit 2015 und Edge seit 2015) mit Ausnahme von Internet Explorer unterstützt.

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

<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded">

Wenn Sie ohne das <img>Tag leben können , empfehle ich Ihnen, das Foto als Hintergrundbild zu verwenden.

.cropcircle{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: #eee no-repeat center;
    background-size: cover;
}

#image1{
    background-image: url(http://www.voont.com/files/images/edit/7-ridiculous-ways-boost-self-esteem/happy.jpg);
}

<div id="image1" class="cropcircle"></div>

Versuche dies:

img {
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

DEMO hier.

ODER:

.rounded {
    height: 100px;
    width: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background:url("http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg") center no-repeat;
    background-size:cover;
}

DEMO hier.

Johnnys Lösung ist gut. Ich fand, dass das Hinzufügen von min-width: 100% wirklich dazu beiträgt, dass Bilder den gesamten Kreis ausfüllen. Sie können dies mit einer Kombination aus JavaScript tun, um optimale Ergebnisse zu erzielen, oder ImageMagick - http://www.imagemagick.org/script/index.php verwenden, wenn Sie es wirklich ernst meinen.

.image-cropper {

  width: 35px;

  height: 35px;

  position: relative;

  overflow: hidden;

  border-radius: 50%;

}

.image-cropper__image {

  display: inline;

  margin: 0 auto;

  height: 100%;

  min-width: 100%;

}

<div class="image-cropper">
  <img src="#" class="image-cropper__image">
</div>

Ich weiß, dass viele der oben genannten Lösungen funktionieren. Sie können auch Flex ausprobieren.

Aber mein Bild war rechteckig und passte nicht richtig. Das habe ich also getan.

.parentDivClass {
    position: relative;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: 20px;
    display: flex;
    justify-content: center;
}

und für das Bild im Inneren können Sie verwenden,

child Img {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

Dies ist hilfreich, wenn Sie Bootstrap 4-Klassen verwenden.

Der beste Weg, dies zu tun, ist die Verwendung der neuen css object-fit(1) -Eigenschaft und des padding-bottom(2) -Hacks.

Sie benötigen ein Wrapper-Element um das Bild. Sie können verwenden, was Sie wollen, aber ich verwende gerne das neue HTML- pictureTag.

.rounded {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* These classes just used for demo */
.w25 {
  width: 25%;
}

.w50 {
  width: 50%;
}

<div class="w25">
<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>
</div>

<!-- example using a div -->
<div class="w50">
<div class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</div>
</div>

<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>

Verweise

1. CSS Bildgröße, wie füllen, nicht dehnen?

2. Pflegen Sie das Seitenverhältnis eines Div mit CSS

Fügen Sie das Bild und dann die Rückhand ein. Alles, was Sie brauchen, ist:

<style>
img {
  border-radius: 50%;
}
</style>

** Der Bildcode wird automatisch hier angezeigt **

Sie müssen dazu jQuery verwenden. Dieser Ansatz gibt Ihnen die Möglichkeit, dynamische Bilder zu erstellen und diese unabhängig von der Größe zu erstellen.

Meine Demo hat momentan einen Fehler. Ich zentriere das Bild nicht im Container, sondern kehre in einer Minute zurück (ich muss ein Skript fertigstellen, an dem ich arbeite).

DEMO

<div class="container">
    <img src="" class="image" alt="lambo" />
</div>

//script
var container = $('.container'),
    image = container.find('img');

container.width(image.height());


//css    
.container {
    height: auto;
    overflow: hidden;
    border-radius: 50%;    
}

.image {
    height: 100%;    
    display: block;    
}