Re: CSS circular image
Miriam Suzanne <[email protected]> Mon, 13 Apr 2020 16:38:07 -0600
| Newsgroups | gmane.comp.web.css.general |
|---|---|
| Message-ID | <2acaeb72-18e8-4f98-a9d1-6ee782c13cd9@Spark> |
--5e94e9d5_69e373_544 Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Content-Disposition: inline Hi John, You can work-around that image-ratio issue with explicit height/width and= object-fit/object-position:=C2=A0https://codepen.io/mirisuzanne/pen/LYpp= YBp That=E2=80=99s probably the solution I use most often. No extra elements,= and I can still apply borders. Cheers, -Miriam On Apr 13, 2020, 11:48 AM -0600, Negoita Ionut <johnny.php=40gmail.com>, = wrote: > Hi David, > > yes, but that's true only if the image is a square, otherwise setting t= he 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=40dbaron.org> = wrote: > > > On Monday 2020-04-13 17:57 +0300, Negoita Ionut wrote: > > > > I'm working on a guide on how to do circle=C2=A0images 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 detaile= d here=C2=A0http://www.coding-dude.com/wp/css/css-circle-image/ > > > > > > > > Method =231 =E2=80=93 Wrapping the image in another element that = has a=C2=A0border-radius=C2=A0of 50% > > > > > > > > Method =232 =E2=80=93 Using an element and setting the image as t= he background. Then applying the border-radius to this element > > > > > > > > Method =233 =E2=80=93 Using=C2=A0clip-path=C2=A0to 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 > > > > > > -- > > > =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 https://dbaron.or= g/=C2=A0 =C2=A0=F0=9D=84=82 > > > =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 https://www.mozil= la.org/=C2=A0 =C2=A0=F0=9D=84=82 > > > =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0Before I built a wa= ll I'd ask to know > > > =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0What I was walling = in or walling out, > > > =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0And to whom I was l= ike to give offense. > > > =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0- Robert =46= rost, Mending Wall (1914) > > > --5e94e9d5_69e373_544 Content-Type: text/html; charset="utf-8" Content-Transfer-Encoding: quoted-printable Content-Disposition: inline <html xmlns=3D=22http://www.w3.org/1999/xhtml=22> <head> <title></title> </head> <body> <div name=3D=22messageBodySection=22> <div dir=3D=22auto=22>Hi John, <div dir=3D=22auto=22><br /></div> <div dir=3D=22auto=22>You can work-around that image-ratio issue with exp= licit height/width and object-fit/object-position:&=23160;<a href=3D=22ht= tps://codepen.io/mirisuzanne/pen/LYppYBp=22>https://codepen.io/mirisuzann= e/pen/LYppYBp</a></div> <div dir=3D=22auto=22><br /></div> <div dir=3D=22auto=22>That=E2=80=99s probably the solution I use most oft= en. No extra elements, and I can still apply borders.&=23160;</div> </div> </div> <div name=3D=22messageSignatureSection=22><br /> <div class=3D=22match=46ont=22>Cheers, <div>-Miriam</div> </div> </div> <div name=3D=22messageReplySection=22>On Apr 13, 2020, 11:48 AM -0600, Ne= goita Ionut <johnny.php=40gmail.com>, wrote:<br /> <blockquote type=3D=22cite=22 class=3D=22spark=5Fquote=22 style=3D=22marg= in: 5px 5px; padding-left: 10px; border-left: thin solid =231abc9c;=22> <div dir=3D=22ltr=22> <div dir=3D=22ltr=22>Hi David, <div><br /></div> <div>yes, but that's true only if the image is a square, otherwise settin= g the border-radius of the image to 50% will make an ellipse, not a circl= e</div> <div><br /></div> <div>John</div> </div> <br /> <div class=3D=22gmail=5Fquote=22> <div dir=3D=22ltr=22 class=3D=22gmail=5Fattr=22>On Mon, Apr 13, 2020 at 8= :41 PM L. David Baron <<a href=3D=22mailto:dbaron=40dbaron.org=22>dbar= on=40dbaron.org</a>> wrote:<br /></div> <blockquote class=3D=22gmail=5Fquote spark=5Fquote=22 style=3D=22margin: = 5px 5px; padding-left: 10px; border-left: thin solid =23e67e22;=22>On Mon= day 2020-04-13 17:57 +0300, Negoita Ionut wrote:<br /> > I'm working on a guide on how to do circle&=23160;images with CSS (p= resenting an image in a circular shape)<br /> ><br /> > I know that there is no one good solution that fits all cases, so I = am trying to cover all possibilities.<br /> ><br /> > So far, I've document 3 main methods with some variations detailed h= ere&=23160;<a href=3D=22http://www.coding-dude.com/wp/css/css-circle-imag= e/=22 rel=3D=22noreferrer=22 target=3D=22=5Fblank=22>http://www.coding-du= de.com/wp/css/css-circle-image/</a><br /> ><br /> > Method =231 =E2=80=93 Wrapping the image in another element that has= a&=23160;border-radius&=23160;of 50%<br /> ><br /> > Method =232 =E2=80=93 Using an element and setting the image as the = background. Then applying the border-radius to this element<br /> ><br /> > Method =233 =E2=80=93 Using&=23160;clip-path&=23160;to clip the imag= e element to a circle.<br /> <br /> Specifying 'border-radius: 50%' on the <img> itself also works, and= <br /> seems simpler than the above three.<br /> <br /> -David<br /> <br /> --<br /> =F0=9D=84=9E&=23160; &=23160;L. David Baron&=23160; &=23160; &=23160; &=23= 160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=231= 60; <a href=3D=22https://dbaron.org/=22 rel=3D=22noreferrer=22 target=3D=22= =5Fblank=22>https://dbaron.org/</a>&=23160; &=23160;=F0=9D=84=82<br /> =F0=9D=84=A2&=23160; &=23160;Mozilla&=23160; &=23160; &=23160; &=23160; &= =23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23= 160; <a href=3D=22https://www.mozilla.org/=22 rel=3D=22noreferrer=22 targ= et=3D=22=5Fblank=22>https://www.mozilla.org/</a>&=23160; &=23160;=F0=9D=84= =82<br /> &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160;Before I bu= ilt a wall I'd ask to know<br /> &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160;What I was = walling in or walling out,<br /> &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160;And to whom= I was like to give offense.<br /> &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160; &=23160;- = Robert =46rost, Mending Wall (1914)<br /></blockquote> </div> <br clear=3D=22all=22 /> <div><br /></div> <div dir=3D=22ltr=22 class=3D=22gmail=5Fsignature=22> <div dir=3D=22ltr=22> <div> <div dir=3D=22ltr=22> <div> <div dir=3D=22ltr=22> <div dir=3D=22ltr=22> <div dir=3D=22ltr=22> <div><br /></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </blockquote> </div> </body> </html> --5e94e9d5_69e373_544--