CSS Circular Cropping von Rechteck Bild

Question

Ich möchte ein zentriertes, kreisförmiges Bild aus dem Rechteck Foto machen. Die Abmessungen des Fotos sind nicht bekannt. 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> 

Answer 1

Der Ansatz ist falsch, müssen Sie die border-radius in den Behälter div anstelle des tatsächlichen Bildes anzuwenden.

Dies funktionieren würde:

HTML

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

CSS

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

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

Und a working fiddle here

Answer 2

Try this:

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 here.

OR:

.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 here.

Answer 3

Sie müssen jQuery verwenden, um dies zu tun. Dieser Ansatz gibt Ihnen die Möglichkeit, dynamische Bilder zu haben und sie unabhängig von der Größe zu machen.

Meine Demo hat jetzt einen Fehler. Ich zentriere das Bild nicht im Container, aber kehre in einer Minute zurück (muss ein Skript beenden, an dem ich gerade 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;  
} 

Answer 4

Wenn Sie ohne die <img> Tag leben kann, empfehle ich Ihnen, das Foto als Hintergrundbild 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>

Answer 5

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

.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>