How to Make Rectangular Image Appear Circular with CSS

CSS Circular Cropping of Rectangle Image

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

This would work:

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

Crop image into square and then to circle using pure CSS?

You can use circle() but without the parameters:

.clipped {
   clip-path: circle();
}

It appears to use the smaller side of your image as the circle's circumference.

Working sample here.

It works on Chrome and FireFox. IE and Edge still does not support clip-path

Create a circle avatar from a rectangle image keeping proportions and just using centre of image

You can set the image as the background of an element, set its background-size to cover, and then use border-radius to round the edges. This works with images of any aspect ratio, and will scale the image to fill the container without stretching/distorting it.

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

CSS Circular Border On Scaled Rectangular Image

In a nutshell:

.my-ele {
    background-color    : #000;
    background-image    : url([URL TO IMAGE]);
    background-repeat   : no-repeat;
    background-position : 50% 50%;
    background-size     : 100% auto;
    background-size     : contain;
    width               : 300px;
    height              : 300px;
    border-radius       : 50%;
}

Here is a demo: http://jsfiddle.net/ArURx/1/

I would use a CSS background property to display the image. You can set your element to be square, whatever dimensions, then set it's background image as the image you want to display and set background-size to contain for modern browsers and something like 100% auto or auto 100% for old browsers (depending on whether you want full-width or full-height).

How to create a circular image with a rectangular shape? CSS

I added float left and it seems to be sitting right next to each other now. You can add padding/margin around the divs under container class to space it from above.

        *{          align-items: center;         align-content: center;         text-align: center;         height: 100%;         margin-top: 0px;        }        .container > div {         display: inline-block;         vertical-align: top;         width: 33.3%;          float:left;        }        
        #myImage {         width: 70%;         border-radius: 50%;         -webkit-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);         -moz-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);         box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75);        }

        <img src="images/twitter.png" id="myImage">
              <div class="container">                <div>a</div>                <div>b</div>                <div>c</div>              </div>

---

Related Topics