W3C home > Mailing lists > Public > www-style@w3.org > April 2020

Re: CSS circular image

From: Miriam Suzanne <miriam@oddbird.net>
Date: Mon, 13 Apr 2020 16:38:07 -0600
To: "L. David Baron" <dbaron@dbaron.org>, Negoita Ionut <johnny.php@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
Message-ID: <2acaeb72-18e8-4f98-a9d1-6ee782c13cd9@Spark>
Hi John,

You can work-around that image-ratio issue with explicit height/width and object-fit/object-position: https://codepen.io/mirisuzanne/pen/LYppYBp

That’s 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@gmail.com>, wrote:
> 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)
>
>
>
Received on Monday, 13 April 2020 22:40:05 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:15 UTC