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

方法一:

  
.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%);
}

方法二:

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

你可能感兴趣的:(img图片在设定的宽高中不变形而居中显示)