1

I would like to display arbitrary rectangular images within a circle and have them display as large as they will fit.

I am using border-radius to make an image (or it's container) circular. The problem with this is object-fit: contain only takes account of the rectangular bounding box, not the circular area so the images are cropped by the circle rather than fitting within it.

The best I have acheived so far is scaling all images by 70%. This makes any image fit without clipping, even a completely square image.

square

However this means the taller or wider the images get the more space there is between them and the edge (making them look too small).

enter image description here

What I really want is this...

enter image description here

Is this kind of "containing" possible in CSS/HTML, or only in Javascript?

Roger Heathcote
  • 3,091
  • 1
  • 33
  • 39
  • Basically, no it's not possible without JS. – Paulie_D May 05 '22 at 16:03
  • Yeah, I don't think it's possible without knowing at least the image's aspect ratio. – isaactfa May 05 '22 at 16:21
  • Can't do that without knowing the aspect ratio of the image and CSS doesn't have a way to find that. (There are ways to approximate the math needed, but it all hinges on the image's aspect ratio.) – Ouroborus May 05 '22 at 16:33
  • @Paulie_D it's possible with CSS ;) – Temani Afif May 05 '22 at 19:18
  • @Ouroborus you can do it even without knowing the ratio (check the duplicate) – Temani Afif May 05 '22 at 19:19
  • 1
    @TemaniAfif I have doubts that that solution will work in this situation. In the "duplicate", the circle is created around the box (the circle is dependent on the box). In this question, the goal is to create a box inside a circle (the box is dependent on the circle). I don't think the solutions to the former can be applied to the later. – Ouroborus May 05 '22 at 19:27

0 Answers0