Дано прямоугольное изображение в макете, которое необходимо сделать круглым.
Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.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;
}
Комментариев нет:
Отправить комментарий