Страницы

Поиск по вопросам

понедельник, 8 июля 2019 г.

Сделать из прямоугольного изображение круглое в css

Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.item { margin-left: 150px; } .photo { width: 132px; height: 132px; margin: 0 auto; overflow: hidden; } .personPhoto { border-radius: 50%; width: 100%; max-width: 100%; height: 100%; margin: 0 auto; }



Ответ

Закругляем div-обертку, а не изображение Выставляем width:auto у изображения для сохранения пропорций.
.item { margin-left: 150px; } .photo { width: 132px; height: 132px; margin: 0 auto; overflow: hidden; border-radius: 50%; } .personPhoto { width: auto; height: 100%; margin: 0 auto; }


Комментариев нет:

Отправить комментарий