CODEWITHSUNDEEP
htmlcssionic2
Manspof
Manspof

Reputation: 357

profile picture in circle proportional css

I'm developing ionic 2 app. I'm looking to make profile picture in circle but it's not works fine. I want it to be in the middle with border circle and white color.

html code

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

css code

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

enter image description here

Upvotes: 1

Views: 1919

Answers (2)

Gianluca Di Vincenzo
Gianluca Di Vincenzo

Reputation: 31

Solution, image position absolute inside parent: 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>

Upvotes: -1

APAD1
APAD1

Reputation: 13666

Just remove the transform: translate(-50%,-50%); from the img css. I also removed the negative margin you had on splash-info just for the purposes of this demo(so that the image wouldn't be cut off at the top). 

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

Upvotes: 3

Related Questions