個人資料圖片圓圈比例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

剛從img CSS刪除transform: translate(-50%,-50%);。爲了本演示的目的，我還刪除了splash-info上的負邊距（以便圖像不會在頂部切斷）。

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

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

Answer 2

溶液，裏面父絕對圖像位置：https://jsfiddle.net/209de4hu/

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

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