圆形比例css中的个人资料图片

Question

我正在开发离子2应用程序。 我希望在圈子中制作个人资料图片，但它不能正常工作。 我希望它在中间有边框圆圈和白色。

html代码

<div class="splash-info">
<div class="wrapper">
 <img src="{{photo}}">
</div>

css代码

.wrapper{
  width:128px;
  height:128px;
  position: relative;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  border: 5px solid white;
}
.wrapper img{
  position: relative;
  width:100%;
  height:auto;
  transform: translate(-50%,-50%);
}


.splash-info {
    position: relative;
    z-index: 2;
    margin-top: -64px;
    margin-bottom: 30px;
    text-align: center;
    font-size:15px;
    font-weight:bold;
  }

Answer 1

只需从transform: translate(-50%,-50%); css中删除img即可。为了本演示的目的，我还删除了splash-info上的负余量（这样图像就不会被截断在顶部）。

＆＃13;

＆＃13;

.wrapper{
  width:128px;
  height:128px;
  position: relative;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  border: 5px solid white;
}
.wrapper img{
  position: relative;
  width:100%;
  height:auto;
}


.splash-info {
  background:#000;
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  text-align: center;
  font-size:15px;
  font-weight:bold;
}

＆＃13;

<div class="splash-info">
  <div class="wrapper">
   <img src="http://placehold.it/128x128">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

解决方案，父级内部的图像位置绝对：https://jsfiddle.net/209de4hu/

＆＃13;

＆＃13;

.wrapper{
  width:128px;
  height:128px;
  position: relative;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  border: 5px solid white;
}
.wrapper img{
  right:50%;
  position:absolute;
}
.splash-info {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size:15px;
    font-weight:bold;
  }

＆＃13;

<div class="splash-info">
  <div class="wrapper">
    <img src="http://www.ricoh-imaging.co.jp/common/img/header-logo2_en.jpg">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;