Can't crop specific part of image for profile picture

I'm wanting to essentially take an image and crop a section of it with CSS.

Here's the picture I'd like to use.

Here's how I'd like to crop it

So, here's the code that I'm using right now.

body {
  font-family: "Montserrat", sans-serif;
}

.staffboxes {
  background: white;
  width: 15%;
  text-transform: uppercase;
  border: #dedede solid 1px;
}

.staffpfp {
  height: 100px;
  width: 100px;
  overflow: hidden;
  float: left;
}

<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" href="staffdesign.css">
  <meta charset="UTF-8" />
</head>

<body>

  <h3>Staff Page</h3>

  <div class="staffboxes">
    <p>
      <div class="staffpfp"><img src="https://i.sstatic.net/f505l.png" alt="Kouhai's DP" /></div>
      <h3>Kouhai</h3>
    </p>
  </div>

</body>

</html>

Here's what comes out

If you could please help me, I'd appreciate it!

Solution

All you have to do is set your image to width: 100% and height to auto to prevent distortion.

This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.

body {
  font-family: "Montserrat", sans-serif;
}

.staffboxes {
  background: white;
  width: 15%;
  text-transform: uppercase;
  border: #dedede solid 1px;
}

.staffpfp {
  height: 100px;
  width: 100px;
  overflow: hidden;
  float: left;
}

.staffpfp img{width: 100%; height: auto;}

<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" href="staffdesign.css">
  <meta charset="UTF-8" />
</head>

<body>

  <h3>Staff Page</h3>

  <div class="staffboxes">
    <p>
      <div class="staffpfp"><img src="https://i.sstatic.net/f505l.png" alt="Kouhai's DP" /></div>
      <h3>Kouhai</h3>
    </p>
  </div>

</body>

</html>