Given a rectangular image in the layout, which must be made round. I wrapped it in a div, cut off the edges, but it doesn’t work as if it were on the layout ... The problem with the shift is an image in this circle. Maybe there is a feature on Bootstrap what, you never know ..

.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; } 
 <article class="item"> <div class="photo"> <img class="personPhoto" alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvTnQ10XsARegWrtgIwH8LiUMMNeggR5CDtHdVDUPFZwdTA-En"> </div> </article>
on the layout ..

outgoing

  • And how on the layout? - br3t
  • @ br3t added, but gone somewhere ... edited. - Vladyslav Tereshyn

1 answer 1

  1. Rounding up the wrapper div , not the image
  2. Expose the width:auto the image to preserve the proportions.

 .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; } 
 <article class="item"> <div class="photo"> <img class="personPhoto" alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvTnQ10XsARegWrtgIwH8LiUMMNeggR5CDtHdVDUPFZwdTA-En"> </div> </article>