img图片在设定的宽高中不变形而居中显示

方法一：

  <div>
    <div class="cover">
      <img class="img-row" src="../assets/case_project_bg.png">
    </div>
    <div class="cover">
      <img class="img-column" src="../assets/operating_1.png">
    </div>
  </div>

.cover {
  margin: 100px auto;
  width: 2.5rem;
  height: 2rem;
  overflow: hidden;
  border: 1px solid cornflowerblue;
  position: relative;
}
.img-row {
  height: 100%;
  width: auto;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
.img-column {
  height: auto;
  width: 100%;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

方法二：

   <div class="cover">
      <img class="img-class" src="../assets/case_project_bg.png">
    </div>

.cover {
  width: 2.5rem;
  height: 2rem;
  overflow: hidden;
}
.img-class {
  width: inherit;
  height: inherit;
  object-fit: cover;
  object-position: center;
}