Закруглить изображение и сместить его центр

CSS
  1. Закругляем div-обертку, а не изображение
  2. Выставляем width:auto у изображения для сохранения пропорций.

CSS:

.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;
}

Html:

<article class="item">
  <div class="photo">
    <img class="personPhoto" alt="" src="">
  </div>
</article>

Круглая рамка

CSS:

div {
	text-align: center;
	border: 5px solid #ffc34f;
	width: 100px;
	line-height: 100px;
	border-radius: 100%;
	margin: 20px 10px;
	display: inline-block;
	vertical-align: top;
}

Html:

<div>Текст</div>

Articoli correlati