html - 创建不固定宽度和高度的圆形图像边框

Question

我有这样一张图片:

我只想显示绿色区域并 overflow hidden :

一模一样的吹图:

问题是图像显示如下:

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>