0

I have an image I want to have a circular effect (the original image is rectangular, and I want it to be round - a typical profile image) Found many sources for this.

The catch is I want to have it inside a bootstrap column and have the img-responsive effect

I got really messed up trying to achieve it

Boaz
  • 4,864
  • 12
  • 50
  • 90
  • I found solution here. Check it once. http://stackoverflow.com/questions/22445276/how-to-turn-images-into-circle-shape-bootstrap-3 – Venkatesh Panabaka Apr 20 '15 at 09:38
  • well - I found smarter solutions that don't involve forcing the image to be square. But they don't work well with image responsive... – Boaz Apr 20 '15 at 09:40

3 Answers3

2

Bootstrap already has a class for that: img-circle

http://getbootstrap.com/css/#images

Edit: Not valid for non-square images, sorry

naoxink
  • 595
  • 1
  • 12
  • 19
0

Can you use something like this DEMO? I think it can be achived by setting your image as a background-image and defining a border-radius which is equivalent to the diameter of your circle.

You will also have to make use of media queries as is always the case when building a responsive design.

The following is a sample as shown in the fiddle:

CSS

.circle{
height:150px;
width:150px;
background-image:url("http://cdn.playbuzz.com/cdn/3170bee8-985c-47bc-bbb5-2bcb41e85fe9/d8aa4750-deef-44ac-83a1-f2b5e6ee029a.jpg");
background-size:cover;
background-position:center;
border-radius:150px;
margin:0 auto;

}

HTML

<div class="row">
<div class="col-xs-6">
    <div class="circle"></div>
</div>
<div class="col-xs-6"></div>

Kinburn101
  • 1,112
  • 2
  • 9
  • 18
  • yeah... but it's not really responsive. It stays 150x150 no matter how you change the browser (and on really narrow ones - it is too big) – Boaz Apr 20 '15 at 10:25
  • You will have to make use of media queries to achieve what you are looking for. – Kinburn101 Apr 20 '15 at 14:26
0

Best way is to use a new css class for the image,

for example. If you are giving css class "img-circle" for the particular image the property should be af following for the css class.

.img-circle{
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
}
Shafeeque
  • 555
  • 1
  • 7
  • 24