Re: CSS circular image

Hi David,

yes, but that's true only if the image is a square, otherwise setting the
border-radius of the image to 50% will make an ellipse, not a circle

John

On Mon, Apr 13, 2020 at 8:41 PM L. David Baron <dbaron@dbaron.org> wrote:

> On Monday 2020-04-13 17:57 +0300, Negoita Ionut wrote:
> > I'm working on a guide on how to do circle images with CSS (presenting
> an image in a circular shape)
> >
> > I know that there is no one good solution that fits all cases, so I am
> trying to cover all possibilities.
> >
> > So far, I've document 3 main methods with some variations detailed here
> http://www.coding-dude.com/wp/css/css-circle-image/
> >
> > Method #1 – Wrapping the image in another element that has
> a border-radius of 50%
> >
> > Method #2 – Using an element and setting the image as the background.
> Then applying the border-radius to this element
> >
> > Method #3 – Using clip-path to clip the image element to a circle.
>
> Specifying 'border-radius: 50%' on the <img> itself also works, and
> seems simpler than the above three.
>
> -David
>
> --
> 𝄞   L. David Baron                        https://dbaron.org/   𝄂
> 𝄢   Mozilla                          https://www.mozilla.org/   𝄂
>              Before I built a wall I'd ask to know
>              What I was walling in or walling out,
>              And to whom I was like to give offense.
>                - Robert Frost, Mending Wall (1914)
>