CSS Circular Cropping of Rectangle Image

Question

I want to make a centered circular image from rectangle photo  The photo s dimensions is unknown  Usually it s a rectangle form  I ve tried a lot of methods  Code  x000D   x000D   image-cropper       max-width  100px      height  auto      position  relative      overflow  hidden      image-cropper img      display  block      margin  0 auto      height  auto      width  150        margin  0 0 0 -20       -webkit-border-radius  50       -moz-border-radius  50       -ms-border-radius  50       -o-border-radius  50       border-radius  50       x000D   lt div class  image-cropper  gt      lt img src  https   sf1 autojournal fr wp-content uploads autojournal 2012 07 4503003e3c38bc818d635f5a52330d jpg  class  rounded    gt   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

The approach is wrong  you need to apply the border-radius to the container div instead of the actual image  This would work   x000D   x000D   image-cropper     width  100px    height  100px    position  relative    overflow  hidden    border-radius  50      img     display  inline    margin  0 auto    height  100     width  auto    x000D   lt div class  image-cropper  gt     lt img src  https   via placeholder com 150  class  rounded    gt   lt  div gt  x000D   x000D   x000D

User · Answer

insert the image and then backhand all you need is    lt style gt  img     border-radius  50      lt  style gt       the image code will be here automatically

User · Answer

Try this   img       height  auto      width  100       -webkit-border-radius  50       -moz-border-radius  50       -ms-border-radius  50       -o-border-radius  50       border-radius  50       DEMO here   OR    rounded       height  100px      width  100px      -webkit-border-radius  50       -moz-border-radius  50       -ms-border-radius  50       -o-border-radius  50       border-radius  50       background url  http   www electricvelocity com au Upload Blogs smart-e-bike-side 2 jpg   center no-repeat      background-size cover      DEMO here

User · Answer

The object-fit property provides a non-hackish way for doing this  with image centered    It has been supported in major browsers for a few years now  Chrome Safari since 2013  Firefox since 2015  and Edge since 2015  with the exception of Internet Explorer      x000D   x000D  img rounded   x000D    object-fit  cover  x000D    border-radius  50   x000D    height  100px  x000D    width  100px  x000D    x000D   lt img src  http   www electricvelocity com au Upload Blogs smart-e-bike-side 2 jpg  class  rounded  gt  x000D   x000D   x000D

User · Answer

If you can live without the  lt img gt  tag  I suggest you use the photo as a background image    x000D   x000D   cropcircle  x000D      width  250px  x000D      height  250px  x000D      border-radius  100   x000D      background   eee no-repeat center  x000D      background-size  cover  x000D    x000D   x000D   image1  x000D      background-image  url http   www voont com files images edit 7-ridiculous-ways-boost-self-esteem happy jpg   x000D    x000D   lt div id  image1  class  cropcircle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Johnny s solution is good  I found that adding min-width 100   really helps images fill the entire circle  You could do this with a combination of JavaScript to get optimal results or use ImageMagick - http   www imagemagick org script index php if you re really serious about getting it right     x000D   x000D   image-cropper   x000D   x000D    width  35px  x000D   x000D    height  35px  x000D   x000D    position  relative  x000D   x000D    overflow  hidden  x000D   x000D    border-radius  50   x000D   x000D    x000D   x000D   image-cropper  image   x000D   x000D    display  inline  x000D   x000D    margin  0 auto  x000D   x000D    height  100   x000D   x000D    min-width  100   x000D   x000D    x000D   lt div class  image-cropper  gt  x000D     lt img src     class  image-cropper  image  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need to use jQuery to do this  This approach gives you the abbility to have dynamic images and do them round no matter the size   My demo has one flaw right now I don t center the image in the container  but ill return to it in a minute  need to finish a script I m working on    DEMO   lt div class  container  gt       lt img src    class  image  alt  lambo    gt   lt  div gt     script var container       container        image   container find  img     container width image height         css      container       height  auto      overflow  hidden      border-radius  50           image       height  100           display  block

User · Answer

The best way I ve been able to do this is with using the new css object-fit  1  property and the padding-bottom  2   hack  You need a wrapper element around the image  You can use whatever you want  but I like using the new HTML picture tag   x000D   x000D   rounded     display  block    width  100     height  0    padding-bottom  100     border-radius  50     overflow  hidden      rounded img     width  100     height  100     object-fit  cover         These classes just used for demo     w25     width  25       w50     width  50     x000D   lt div class  w25  gt   lt picture class  rounded  gt     lt img src  https   i imgur com A8eQsll jpg  gt   lt  picture gt   lt  div gt    lt  -- example using a div -- gt   lt div class  w50  gt   lt div class  rounded  gt     lt img src  https   i imgur com A8eQsll jpg  gt   lt  div gt   lt  div gt    lt picture class  rounded  gt     lt img src  https   i imgur com A8eQsll jpg  gt   lt  picture gt  x000D   x000D   x000D   References  CSS Image size  how to fill  not stretch   Maintain the aspect ratio of a div with CSS

User · Answer

The accepted answer probably works for some situations  but it depends on the ratio of the rectangle and any predetermined styles  I use this method because it s more compatible than solutions only using object-fit   x000D   x000D   image-cropper      width  150px     height  150px     position  relative     overflow  hidden     border-radius  50      border 2px solid  f00        Common img styles in web dev environments    img      height  auto     max-width  100         Center image inside of parent    img center      position  absolute     top  50      left  50      transform  translate -50   -50          For horizontal rectangles    img horizontal      height  100      width  auto     max-width  9999px     max-content fall back       max-width  max-content    x000D   lt div class  image-cropper  gt     lt img src  https   via placeholder com 300x600  class  center    gt   lt  div gt    lt div class  image-cropper  gt     lt img src  https   via placeholder com 600x300  class  horizontal center    gt   lt  div gt  x000D   x000D   x000D   If you run the snippet you can see  for horizontal rectangles we add another class  horizontal  We override max-width to allow the img to go larger than 100  of the width  This preserves the aspect ratio  preventing the image from stretching  However  the image will not be centered and that s where the  centered class comes in  It uses a great centering trick to absolute position the image in the center both vertically and horizontally  More information on the centering at CSS Tricks More than likely you won t always know what ratio the image will be  so this is why I d suggest using javascript to target the img and add the  horizontal class if needed  Here is a stack overflow answer that would work

User · Answer

I know many of the solutions mentioned above works  you can as well try flex   But my image was rectangular and not fitting properly  so this is what i did    parentDivClass       position  relative      height  100px      width  100px      overflow  hidden      border-radius  50       margin  20px      display  flex      justify-content  center      and for the image inside  you can use   child Img       display  block      margin  0 auto      height  100       width  auto      This is helpful when you are using bootstrap 4 classes

[html] CSS Circular Cropping of Rectangle Image

Examples related to html

Examples related to css