Bootstrap 3: Using Img-Circle, How to Get Circle from Non-Square Image

How to turn images into circle shape? Bootstrap 3

An image has to be a square in order for the styling to make it into a perfectly round circle. (example)

<img class='img-circle' src='..' />

The following bootstrap styling is applied to the img-circle element:

.img-circle {
    border-radius: 50%;
}

Therefore if the image is rectangular, you will generate an ellipse-like shape. If you want to work around this, you would have to apply a mask over the image. Alternatively, you could probably also clip it.

You might be interested in the following question: How does this CSS produce a circle?.

How to set Circle image?

You can achieve this by giving the image as background from this answer -
Bootstrap 3: Using img-circle, how to get circle from non-square image?

Well, If you still want to use Img tag to display the image then, I found the solution in a weird way.

JSFiddle

div.wrapper {  text-align: center;  width: 300px;  margin: 0 auto;}
img {  width: 100%;}
.clipped-image img {  position: absolute;  top: 0;  left: 50%;  bottom: 0;  right: 0;  width: auto;  height: 100%;  transform: translateX(-50%);}
.clipped-image {  display: block;  position: relative;  margin: 0 auto;  /* desired width */}
.clipped-image:before {  content: "";  display: block;  padding-top: 100%;  /* initial ratio of 1:1*/}
.clipped-image .mask {    position: absolute;    top: 0;    bottom: 0;    right: 0;    width: 100%;    overflow: hidden;    border-radius: 50%;    left: 50%;    transform: translateX(-50%);}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="wrapper">  <h4>Original image</h4>  <div class="real-image">    <img src="http://loremflickr.com/320/240">  </div>
  <br>  <br>  <br>
  <h4>Image after clipping</h4>  <div class="clipped-image">    <div class="mask">      <img src="http://loremflickr.com/320/240" class="img-circle" alt="Cinque Terre">    </div>
  </div></div>

Bootstrap 4 img-circle class doesn't seem to exist

It's now called rounded-circle as explained here in the BS4 docs

<img src="img/gallery2.JPG" class="rounded-circle">

Demo

img class=rounded-circle is not creating a rounded circle in asp.net

For Bootstrap, you should add img-circle and not rounded-circle. See the sample here Give it a try.

Bootstrap's img-circle css class resizes my image to a different 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="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>

Crop and center image to circle in Bootstrap 4

here's solution for this using 1x1 aspect ratio set via pseudo-element padding which calculation is based on parent's width. you can find detailed articles below

JS is used for calculating image aspect ratio.

if width/height == 1 - image is square
if width/height > 1 - image is wide
if width/height < 1 - image is narrow

after calculation tallAndNarrow class applied if needed and loaded class added for all images to show with opacity fade in and no shakes during tall image reposition

Height equals width with pure CSS http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Maintain Aspect Ratio SASS Mixin https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

function fixAspect(img) {
  var $img = $(img),
    width = $img.width(),
    height = $img.height(),
    tallAndNarrow = width / height < 1;
  if (tallAndNarrow) {
    $img.addClass('tallAndNarrow');
  }
  $img.addClass('loaded');
}

.circle {
  width: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}

.circle:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}

.circle>img {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX( -50%);
  top: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  opacity: 0;
  transition: opacity .4s;
}

.circle>img.tallAndNarrow {
  width: 100%;
  top: 50%;
  transform: translateX(0) translateY( -50%);
  left: 0;
  height: auto;
}

.circle>img.loaded {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-4">
  <div class='circle'>
    <img src="http://wallpaper.pickywallpapers.com/1920x1080/mark-wahlberg-front-profile.jpg" alt="Sample Image" onload='fixAspect(this);'>
  </div>

</div>
<div class="col-4">

  <div class='circle'>
    <img src="http://via.placeholder.com/150x350" alt="Sample Image" onload='fixAspect(this);'>
  </div>
</div>

<div class="col-4">

  <div class='circle'>
    <img src="http://via.placeholder.com/150x150" alt="Sample Image" onload='fixAspect(this);'>
  </div>
</div>

---

Related Topics