Question

我意识到还有另一个线程可以解决这个问题，但是我在实现某些建议时遇到了麻烦。截至目前，我正在进行实验，但不胜感激任何建议。以下是我想要在圆圈中裁剪的肖像的屏幕截图：http://imgur.com/autCwaj

虽然我可能偏离正轨，但我的代码如下 -

HTML：

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

CSS：

{{1}}

感谢大家的帮助。

Answer 1

如果你想要一个圆形而不是一个椭圆形，你需要重新排列一些CSS。外部div必须是正方形，图像需要将其两个维度的小部分拉伸到水獭div的100％。

＆＃13;

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

＆＃13;

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

＆＃13;

尝试使用HTML和CSS进行圆形裁剪图像

1 个答案: