Keep the original ratio in a thumbnail image

CSS Reference: background-size can stretch a background image proportionally using cover or contain. Check out this Demo.

HTML

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

CSS

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

The remaining space with contain will be transparent so just put it in a container with a background color set.