How to make picture fit inside half circle

Question

I am trying to recreate the profile card on the top. The picture on the bottom with the face covered is mine. I am trying to make the profile card look like the picture on the top. I am having trouble trying to make the white half-circle fit the circular image. The code I am working with is the .card-header. I was experimenting with border-radius but that did not do as I expected. Does anyone have any thoughts?

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap');

body {
  background-color: hsl(185, 75%, 39%);
}

.card-header {
  height: 110px;
  position: absolute;
  width: 100%;
  background-color: hsl(184, 63%, 64%);
  border-style: none;
  border-radius: 0 0 10% 100%;
}

.card-body {
  padding: 0;
}

img {
  margin: auto;
  display: block;
  border-radius: 50%;
  margin-top: 60px;
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
  integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style/main.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Profile card component</title>
</head>
<body>
  <div class="card proifleCard" style="width: 21rem; border-radius: 20px; overflow: hidden;">
    <div class="card-header"></div>
    <div class="card-body">
      <img src="images/image-victor.jpg" alt="profile pic of Victor">
      <p class="card-text name">Victor Crest<span class="grey"> 26</span></p>
      <p class="card-text grey city">London</p>
      <div class="card-footer">
        <ol class="list d-flex justify-content-center">
          <ul>
            <strong class="stats">80K</strong>
            <p class="grey small">Followers</p>
          </ul>
          <ul>
            <strong class="stats">803K</strong>
            <p class="grey small">Likes</p>
          </ul>
          <ul>
            <strong class="stats">1.4K</strong>
            <p class="grey small">Photos</p>
          </ul>
        </ol>
      </div>
    </div>
  </div>
</body>
</html>

Roko C. Buljan · Accepted Answer · 2021-03-24T21:50:05.077

1. Using CSS `flex` and `transform`:

Parent : justify-content: center to center align the IMG child
Child (image) : align-self: flex-end; to bring it to the bottom
Child (image) : translateY(50%) move it 50% down (if image is 100px height, 50% means additional 50px)

.card-header {
  height: 110px;
  background-color: hsl(184, 63%, 64%);
  display: flex;
  justify-content: center;
}

.card-img {
  align-self: flex-end;
  border-radius: 50%;
  width: 100px; height: 100px;
  transform: translateY(50%); /* additional 50% of own height */
  box-shadow: 0 0 0 10px #fff;
}

<div class="card-header">
  <img class="card-img" alt="User image" src="https://graph.facebook.com/3303263213037003/picture?type=large">
</div>

2. Using CSS `position: absolute`

Alternatively, if you have more items inside that header, isolate the child using position: absolute;

.card-header {
  position: relative; /* since some child is absolute */
  height: 110px;
  background-color: hsl(184, 63%, 64%);
}

.card-img {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  width: 100px; height: 100px;
  transform: translateY(50%); /* additional 50% of own height */
  box-shadow: 0 0 0 10px #fff;
}

<div class="card-header">
  <img class="card-img" alt="User image" src="https://graph.facebook.com/3303263213037003/picture?type=large">
</div>

How to make picture fit inside half circle

1 Answers1

1. Using CSS flex and transform:

2. Using CSS position: absolute

1. Using CSS `flex` and `transform`:

2. Using CSS `position: absolute`