Need Help with CSS Code for Round Photo Frames

API & Customization
1

Hey Guys<

I hope everyone is doing well. I’m relatively new to web development, and I’ve been working on a project to create round photo frames using CSS. However, I’ve encountered an issue that I can’t seem to solve on my own. The problem is that my round photo frames are not centering properly, and they are not filling the frame with the underlying photo as expected.

Here’s the updated CSS code I’ve been using for the round photo frames:

/* Style for round images */
.field_23 {
  width: 100px; /* Adjust the width and height as needed */
  height: 100px;
  border-radius: 50%; /* Makes the container round */
  overflow: hidden; /* Clips the container to the round shape */
  display: flex;
  justify-content: center;
  align-items: center;
}

.field_23 img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Stretch the image to fully cover the container */
}

I expected the above code to create round frames that center the underlying photo and fill the frame entirely. However, the photos within the frames are not centered, and they don’t fill the frame properly. Instead, they appear slightly off-center and do not occupy the entire circular frame.

I’ve tried different variations of the CSS, adjusting margins, padding, and positioning, but I haven’t been able to achieve the desired result.

Could someone please point out what I might be doing wrong or suggest improvements to the CSS code to make the photos center properly and fill the round frame completely?

Any help or guidance would be greatly appreciated! Thanks in advance for your assistance.

1 Like
2

for context this is how the image is appearing in the table

image

3

Hey @Eric4 ,
I usually use object-fit: cover rather than fill, which will cover the whole content of the image.
Let me know if that works for you!

td.field_71 img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

image

1 Like
4

It doesn’t seem to have made a difference at all. Here is the code as I entered it and the result.

Screenshot 2023-11-20 133150
Screenshot 2023-11-20 1331501046×418 44.8 KB

/* Style for round images /
.field_23 {
width: 100px; / Adjust the width and height as needed /
height: 100px;
border-radius: 50%; / Makes the container round /
overflow: hidden; / Clips the container to the round shape */
display: flex;
justify-content: center;
align-items: center;
}

.field_23 img {
width: 100px;
height: 100px;
object-fit: cover;
}

1 Like
5

Update! I replaced my code with yours and it worked. Saved me a lot of time, thank you so much for your help!

1 Like
6

If i wanted to apply this to the Details view, what would the selector be?

7

@Eric4, something like this will do it:

.field_xx .kn-detail-body  img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

image

1 Like
8

Thank you so very much! You’re the man!

2 Likes