Re: CSS circular image

--000000000000e6ab1c05a32fadd8
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

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 <[email protected]> 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 =E2=80=93 Wrapping the image in another element that has
> a border-radius of 50%
> >
> > Method #2 =E2=80=93 Using an element and setting the image as the backg=
round.
> Then applying the border-radius to this element
> >
> > Method #3 =E2=80=93 Using clip-path to clip the image element to a circ=
le.
>
> Specifying 'border-radius: 50%' on the <img> itself also works, and
> seems simpler than the above three.
>
> -David
>
> --
> =F0=9D=84=9E   L. David Baron                        https://dbaron.org/ =
  =F0=9D=84=82
> =F0=9D=84=A2   Mozilla                          https://www.mozilla.org/ =
  =F0=9D=84=82
>              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)
>

--000000000000e6ab1c05a32fadd8
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr"><div dir=3D"ltr">Hi David,<div><br></div><div>yes, but tha=
t&#39;s true only if the image is a square, otherwise setting the border-ra=
dius of the image to 50% will make an ellipse, not a circle</div><div><br><=
/div><div>John</div></div><br><div class=3D"gmail_quote"><div dir=3D"ltr" c=
lass=3D"gmail_attr">On Mon, Apr 13, 2020 at 8:41 PM L. David Baron &lt;<a h=
ref=3D"mailto:[email protected]">[email protected]</a>&gt; wrote:<br></div>=
<blockquote class=3D"gmail_quote" style=3D"margin:0px 0px 0px 0.8ex;border-=
left:1px solid rgb(204,204,204);padding-left:1ex">On Monday 2020-04-13 17:5=
7 +0300, Negoita Ionut wrote:<br>
&gt; I&#39;m working on a guide on how to do circle=C2=A0images with CSS (p=
resenting an image in a circular shape)<br>
&gt; <br>
&gt; I know that there is no one good solution that fits all cases, so I am=
 trying to cover all possibilities.<br>
&gt; <br>
&gt; So far, I&#39;ve document 3 main methods with some variations detailed=
 here=C2=A0<a href=3D"http://www.coding-dude.com/wp/css/css-circle-image/" =
rel=3D"noreferrer" target=3D"_blank">http://www.coding-dude.com/wp/css/css-=
circle-image/</a><br>
&gt; <br>
&gt; Method #1 =E2=80=93 Wrapping the image in another element that has a=
=C2=A0border-radius=C2=A0of 50%<br>
&gt; <br>
&gt; Method #2 =E2=80=93 Using an element and setting the image as the back=
ground. Then applying the border-radius to this element<br>
&gt; <br>
&gt; Method #3 =E2=80=93 Using=C2=A0clip-path=C2=A0to clip the image elemen=
t to a circle.<br>
<br>
Specifying &#39;border-radius: 50%&#39; on the &lt;img&gt; itself also work=
s, and<br>
seems simpler than the above three.<br>
<br>
-David<br>
<br>
-- <br>
=F0=9D=84=9E=C2=A0 =C2=A0L. David Baron=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 <a href=3D"https://dbaron.=
org/" rel=3D"noreferrer" target=3D"_blank">https://dbaron.org/</a>=C2=A0 =
=C2=A0=F0=9D=84=82<br>
=F0=9D=84=A2=C2=A0 =C2=A0Mozilla=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 <a href=3D"https://www.moz=
illa.org/" rel=3D"noreferrer" target=3D"_blank">https://www.mozilla.org/</a=
>=C2=A0 =C2=A0=F0=9D=84=82<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0Before I built a wall I&#39=
;d ask to know<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0What I was walling in or wa=
lling out,<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0And to whom I was like to g=
ive offense.<br>
=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0- Robert Frost, Mend=
ing Wall (1914)<br>
</blockquote></div><br clear=3D"all"><div><br></div><div dir=3D"ltr" class=
=3D"gmail_signature"><div dir=3D"ltr"><div><div dir=3D"ltr"><div><div dir=
=3D"ltr"><div dir=3D"ltr"><div dir=3D"ltr"><div><br></div></div></div></div=
></div></div></div></div></div></div>

--000000000000e6ab1c05a32fadd8--