Как обрезать изображение ровно по кругу?

Question

[Ложка в мозге]

Здравствуйте, как обрезать изображение ровно по кругу, чтобы не было подобных искривлений?


HTML:

<div class = "avatar">
<img src="<?php avatar('$img') ?>" class = "avatar-r">
</div>

CSS:

.avatar{
 position: fixed;
    top: 10%;
    left: 10%;
    width: 30%;
    border-radius: 100%;
}

.avatar-r{

    width: 100%;    
    border-radius: 100%;
}

Answer 1

[Henxed]

Вам нужно фиксированную ширину и высоту. Также изображение не должно выходить за границы блока, если оно круглое, так мы обрежем углы.
Решение: https://jsfiddle.net/Henxed/4u3rseq1/5/

Если вдруг захотите, чтобы прямоугольное изображение было по центру, то: https://jsfiddle.net/Henxed/4u3rseq1/9/

Comments

[habrdima]

Второй норм вариант)

[Ложка в мозге]

Спасибо большое!

Answer 2

[Никита Сизов]

Я обычно только для одного селектора ставлю border-radius: 50%;, т.е. никаких селекторов с дополнением типа "-r" не добавляю. Но это на тот случай, если картинка квадратная (равносторонняя). В противном случае делаем картинку равной как по ширине, так и по высоте. Задаём её в пикселях, а не в процентах.