Уменьшение разрешения, разных изображений
 

Есть такая проблема, если загрузить изображение, у которого сторона x короче стороны y, то всё нормально, а если наоборот, то после загрузки, остаётся пустое место, как этого избежать?

Можно дописать атрибут height=80, но тогда изображения будут искажаться.

<style>
.ava {
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 50%;
	border: 1px solid #b1b1b1;
}
</style>

<div class="ava">
  <img src="http://i96.fastpic.ru/big/2017/0801/65/a6bf6064479f865c2d64e25e51243f65.jpg" width="80">
</div>

<br><br>

<div class="ava">
  <img src="http://i94.fastpic.ru/big/2017/0801/4d/758881cfff1c51e221bded6053b8564d.jpg" width="80">

DivMan,

<style>
.ava {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #b1b1b1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


</style>

<div class="ava" style="background-image: url(http://i96.fastpic.ru/big/2017/0801/65/a6bf6064479f865c2d64e25e51243f65.jpg)">
</div>

<br><br>

<div class="ava" style="background-image: url(http://i94.fastpic.ru/big/2017/0801/4d/758881cfff1c51e221bded6053b8564d.jpg)">
</div>