css: processing of avatar images in a rectangular box centered circular

demand

There are a number of picture data could have been rectangular, circular now to put a picture frame, then it will show only half left, I want to show is centered.

Code

<div class="top-photo"
     :style="'background-image:url(' + avatar + ')'">

.top-photo {
  width: 1.2rem;
  height: 1.2rem;
  border: solid 0.05rem #34b3de;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: 50%;
  background-color: #ddd;
}