CSS Circular Cropping of Rectangle Image

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

How to crop a rectangular image into a square with CSS?

Assuming they do not have to be in IMG tags...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Note this could also be modified to be responsive, for example % widths and heights etc.

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

Create Centered Circles from Rectangles Images using Bootstrap

You should enclose your image in a parent div.

The only thing .img-circle does is apply border-radius: 50%; It will inherit the width and the height of the chosen element. If those are not equal it will be an oval. In that case you will have to define sizes but then the images will get distorted. So that's why you need a parent div. To set the width and the height, and not distort the image.

.img-circle {    border-radius: 50%;    position: relative;    height: 117px;    width: 117px;    overflow: hidden;       float: left;    margin-right: 10px;}
.img-circle.hor img {    position: absolute;    left: 50%;    width: auto;    height: 117px;    transform: translateX(-50%); }
.img-circle.vert img {    position: absolute;    top: 50%;    width: 117px;    height: auto;    transform: translateY(-50%);}

    <div class="img-circle hor">        <img src="http://placehold.it/350x150" />    </div>
    <div class="img-circle vert">        <img src="http://placehold.it/150x350" />    </div>

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>

Creating a round image

Does

border-radius: 999999px;

suit your need?

The 'better' solution would be to specify your image's width and height explicitly in the CSS, rather than having the browser auto-size it.

.skill-row-img {
  width: 400px;
  height: 400px;
  border-radius: 200px; /* <-- 50% works here too, because the image is already square so you get a circle rather than an oval*/
}

---

Related Topics