CSS Reference: background-size 可以使用按比例拉伸背景图像cover 或contain. 看看这个Demo.

HTML

<div class="square"></div>  
<div class="rec"></div>  

.rec, .square {
  border: solid red 1px;
  background-color:black;
  background: url("https://placeholdit.imgix.net/~text?txtsize=23&txt=120×120&w=120&h=120");
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center; 
}
.rec {
  width:100px;
  height:60px;
}
.square {
  width:100px;
  height:100px;
}