创建可变圆形图像边框

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;
}

- Hamed mayahian

---

@RickBronger请再次阅读问题。 - Hamed mayahian

好的。我删除了我的回答。你还要改几次问题？那我就知道什么时候回答了 ;)。 - Rick Bronger

@RickBronger 我刚刚编辑了一下，以便更清楚地表达我的意思。 - Hamed mayahian

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>

- Henrik Albrechtsson

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浏览器支持

- thepio

Answer 3

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

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

- antyrat

---

抱歉，您的请求不清楚。请提供需要翻译的英文文本。 - Hamed mayahian

@Radian 图像尺寸是静态的还是动态的？你可以硬编码图像的宽度或高度吗？ - antyrat

当您设置宽度和高度时，它将以您想要的方式显示。 - Rick Bronger

我可以做这个，但我正在寻找另一种不使用background-image的解决方案。@antyrat - Hamed mayahian

@Radian 我认为这是不可能的。或者这将需要非常丑陋的hack或JS。 - antyrat