Как обрезать изображение ровно по кругу?
Вам нужно фиксированную ширину и высоту. Также изображение не должно выходить за границы блока, если оно круглое, так мы обрежем углы.
Решение: https://jsfiddle.net/Henxed/4u3rseq1/5/
Если вдруг захотите, чтобы прямоугольное изображение было по центру, то: https://jsfiddle.net/Henxed/4u3rseq1/9/
Я обычно только для одного селектора ставлю border-radius: 50%;, т.е. никаких селекторов с дополнением типа "-r" не добавляю. Но это на тот случай, если картинка квадратная (равносторонняя). В противном случае делаем картинку равной как по ширине, так и по высоте. Задаём её в пикселях, а не в процентах.