Home » Html » CSS Circular Cropping of Rectangle Image

CSS Circular Cropping of Rectangle Image

Posted by: admin November 29, 2017 Leave a comment

Questions:

I want to make a centered circular image from rectangle photo.
The photo’s dimensions is unknown. Usually it’s a rectangle form.
I’ve tried a lot of methods:

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>
Answers:

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

This would work:

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

And a working fiddle here

Questions:
Answers:

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.

Questions:
Answers:

If you can live without the <img> tag, I suggest you use the photo as a background image.

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

Questions:
Answers:

Johnny’s solution is good. I found that adding min-width:100%, really helps images fill the entire circle. You could do this with a combination of JavaScript to get optimal results or use ImageMagick – http://www.imagemagick.org/script/index.php if you’re really serious about getting it right.

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

Questions:
Answers:

You need to use jQuery to do this. This approach gives you the abbility to have dynamic images and do them round no matter the size.

My demo has one flaw right now I don’t center the image in the container, but ill return to it in a minute (need to finish a script I’m working on).

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

Leave a Reply

Your email address will not be published. Required fields are marked *