尝试用HTML和CSS循环裁剪图像

Question

我意识到还有另一条解决这个问题的线索，但我在针对我的特殊情况执行一些建议时遇到了困难。到目前为止，我正在做一些实验，但希望有任何建议。这是我想要剪成一个圆圈的肖像的截图：http://imgur.com/autCwaj

虽然我可能偏离了方向，但我的代码如下--

HTML：

<section class="hero">
    <div class="content">
        <div class="image-cropper">
            <img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me">
        </div>
        <p class="iama">My name is...</p>
        <p class="my-name my-info">Jason Brain</p>
        <p class="iama">I want to be (eventually)...</p>
        <p class="my-info">A front end, full stack, and iOS developer</p>
    </div>
</section>

CSS：

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
}

.my-picture {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: auto;
  border: 2px solid white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

谢谢大家的帮助。

Answer 1

如果你想要一个圆圈而不是椭圆形，你需要重新排列一些CSS。外部div需要是方形的，图像需要将其二维中的小部分伸展到水獭div的100%。

​

.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    border: 2px solid white;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    overflow:hidden;
}
.my-picture {
    display: block;
    margin: 0 auto;
    height: auto;
    width: 100%;
}

<section class="hero">
    <div class="content">
        <div class="image-cropper">
            <img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me"/>
        </div>
        <p class="iama">My name is...</p>
        <p class="my-name my-info">Jason Brain</p>
        <p class="iama">I want to be (eventually)...</p>
        <p class="my-info">A front end, full stack, and iOS developer</p>
    </div>
</section>

​