Object-Fit Demo

HTML

<div class="outer">
<div class="container">
  <img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/purplesproutingbrocc_83642_16x9.jpg">
</div>
</div>

CSS

.outer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.container {
  width: 220px;
  height: 220px;
  border: solid 4px black;
  border-radius: 50%;
  margin-top: 50px;
}

img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}