CODEWITHSUNDEEP
csstwitter-bootstrap
Jonathan Allen Grant
Jonathan Allen Grant

Reputation: 3648

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.

Upvotes: 3

Views: 11165

Answers (2)

user3327755
user3327755

Reputation: 79

Alternate to img-circle works well too:

<div class="circle-img rounded-circle">
   <img src="http://www.servingsushi.com/images/header/photo_1_1.jpg">
</div>

Upvotes: -1

daniman
daniman

Reputation: 284

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="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="circle-img img-circle">
  <img src="http://www.servingsushi.com/images/header/photo_1_1.jpg" >
</div>

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.

Upvotes: 6

Related Questions