How to make rectangular image appear circular with CSS

Question

I ve used border-radius  50  or border-radius  999em  but the problem is the same  with squared images there s no problem  but with rectangular images I obtain an oval circle  I m also disposed to crop a part of the image  obviously   Is there s a way to do that with pure CSS  or at least JavaScript   jQuery   without using a  lt div gt  with a background-image  but only using the  lt img gt  tag

User · Answer

You can make it like that        lt html gt   lt head gt       lt style gt           round               display block              width  55px              height  55px              border-radius  50               overflow  hidden              padding 5px 4px                     round img               width  45px                 lt  style gt   lt  head gt   lt body gt       lt div class  round  gt           lt img src  image jpg    gt       lt  div gt   lt  body gt

User · Answer

I ve been researching this very same problem and couldn t find a decent solution other than having the div with the image as background and the img tag inside of it with visibility none or something like this   One thing I might add is that you should add a background-size  cover to the div  so that your image fills the background by clipping it s excess

User · Answer

lt html gt       lt head gt   lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt       lt style gt       round img       border-radius  50       max-width  150px      border  1px solid  ccc             lt  style gt       lt script gt      var cw       round img   width            round img   css        height   cw    px               lt  script gt       lt  head gt       lt body gt       lt img class  round img  src  image jpg  alt    title      gt       lt  body gt   lt  html gt    http   jsfiddle net suryakiran 1xqs4ztc

User · Answer

Building on the answer from  fzzle - to achieve a circle from a rectangle without defining a fixed height or width  the following will work  The padding-top 100  keeps a 1 1 ratio for the circle-cropper div  Set an inline background image  center it  and use background-size cover to hide any excess   CSS   circle-cropper     background-repeat  no-repeat    background-size  cover    background-position  50     border-radius  50     width  100     padding-top  100       HTML   lt div class  circle-cropper  role  img  style  background-image url myrectangle jpg    gt  lt  div gt

User · Answer

you can only make circle from square using border-radius    border-radius doesn t increase or reduce heights nor widths   Your request is to use only image tag   it is basicly not possible if tag is not a square   If you want to use a blank image and set another in bg  it is going to be painfull   one background for each image to set   Cropping can only be done if a wrapper is there to do so  inthat case   you have many ways to do it

User · Answer

Following worked for me     CSS   round     border-radius  50     overflow  hidden    width  30px    height  30px    background  no-repeat 50     object-fit  cover     round img      display  block     height  100      width  100       HTML     lt div class  round  gt      lt img src  test png    gt   lt  div gt

User · Answer

For those who use Bootstrap 3  it has a great CSS class to do the job    lt img src       class  img-circle  gt

User · Answer

This one works well if you know height and width   img     object-fit  cover    border-radius   50      width  100px    height  100px      via https   medium com  chrisnager center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

User · Answer

My 2cents because the comments for the only answer are getting kinda crazy  This is what I normally do  For a circle  you need to start with a square  This code forces a square and will stretch the image  If you know that the image is going to be at least the width and height of the round div you can remove the img style rules for it to not be stretch but only cut off    lt html gt       lt head gt           lt style gt               round                   border-radius  50                   overflow  hidden                  width  150px                  height  150px                             round img                   display  block                 Stretch                    height  100                     width  100                  min-width  100               min-height  100                          lt  style gt       lt  head gt       lt body gt           lt div class  round  gt               lt img src  image jpg    gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet  My suggestion is to set the source inline    lt div style    background-image  url image gif   gt  lt  div gt   div       background-repeat  no-repeat      background-position  50       border-radius  50       width  100px      height  100px      Fiddle

[html] How to make rectangular image appear circular with CSS

Examples related to html

Examples related to css

Examples related to css-shapes