Jonathan Allen Grant Jonathan Allen Grant - 4 months ago 8
CSS Question

Bootstrap's img-circle css class resizes my image to a different ratio

I want to take an image (it should work for a square or a rectangle) and make it into a circle of a fixed size. Right now, I use Bootstrap's img-circle class and my own css. Here is my own CSS:

.circle-img {
min-width: 250px;
min-height: 250px;
max-width: 250px;
max-height: 250px;

However, it is taking a rectangle image and squeezing it, messing up the ratio.


To do this for rectangular images, you should create a wrapper around your img, and put the .img-circle class on the wrapper instead. That way, you can reposition the image inside the circle to be wherever you want (horizontally centered in the example below).

.circle-img {
  width: 250px;
  height: 250px;
  overflow: hidden;

.circle-img img {
  height: 100%;
  transform: translateX(-50%);
  margin-left: 50%;
<link href="" rel="stylesheet"/>

<div class="circle-img img-circle">
  <img src="" >

It won't work without the wrapper, because the circle is created by rounding the edges of the image, and the image cannot overflow beyond its own edges. Thus, you either end up with an oval, or a squished image.