Radian Radian - 3 months ago 11
CSS Question

create circular image border without fix width and height

I have an image like so:

enter image description here

i want to show just green area and overflow hidden
:

enter image description here

Exactly like image blow:

enter image description here

the problem is image display like so:

enter image description here

The image in the html file (not background image);

Here is the html file:

<div class="thumb">
<img class="img-responsive" src="/image/25085">
</div>


CSS file :

.jbTourItem img {
width: 100px;
border: 4px solid #eee;
border-radius: 50%;
margin-right: 15px;
}

Answer

As Henrik already answered this answer will also assume you can set the height of the wrapping div but in this example flexbox is used so that you can get the image totally centered inside the circle.

.thumb {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb img {
  height: 100%;
  width: auto;
}
<div class="thumb">
  <img src="http://i.cbc.ca/1.2101005.1382019145!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_620/hotel-room.jpg" />
</div>
<div>
  <h4>Original image</h4>
  <img src="http://i.cbc.ca/1.2101005.1382019145!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_620/hotel-room.jpg" />
</div>

Flexbox browser support

Comments