Есть такая проблема, если загрузить изображение, у которого сторона
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">