创建圆形图像边框，没有固定宽度和高度

Question

我有一个像这样的图像：

我想显示绿色区域和溢出隐藏 ：

完全像图像打击：

问题是图像显示如此：

html文件中的图片（不是背景图片）;

这是html文件：

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

CSS文件：

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

Answer 1

如果你不想指定图像的宽度和高度，但要知道你想要的圆的大小，我会这样做。

<强> CSS

.circle {
    border-radius: 50%;
    height: 118px;
    overflow: hidden;
    position: relative;
    width: 118px;
}

.center {
    position: relative;
    padding-left: 50%;
}

.thumb {
    position: absolute;
    left: -50%;
}

<强> HTML

<div class="circle">
    <div class="center">
        <img src="http://i.stack.imgur.com/nByPB.jpg" class="thumb">
    </div>
</div>

Answer 2

正如Henrik已经回答的那样，这个答案也会假设你可以设置包装div的高度，但是在这个例子中使用了flexbox，这样你就可以将图像完全置于圆圈的中心位置。

.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

Answer 3

可以使用border-radius CSS属性完成：

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