How do I properly manage the image?

[randomboi404]

media_ui = widgets.Box(
    vertical=True,
    css_classes=["dash-item-con"],
    hexpand=True,
    vexpand=True,
    child=[
        widgets.Picture(
            hexpand=False,
            image="/home/user/.config/ignis/assets/pfp.png",
            css_classes=["media-img"],
            content_fit="scale_down"
        ),
        widgets.Label(
            label="No Media Playing",
            halign="center",
            justify="center",
            css_classes=["media-title"]
        ),
        widgets.Label(
            label="-x-x-x-",
            halign="center",
            justify="center",
            css_classes=["media-artist"]
        )
    ]
)

In this code, when I apply the following scss properties on image,

.media-img {
  border-radius: 50%;
  box-shadow:
    0 0 0.6rem rgba($background, 0.8),
    0 0 0.2rem $background;
}

I am seeing something like this:

What I wanted was a circular pfp type image to display, but I am unable to achieve it. I tried to wrap the Picture inside another box (so as to use box's height_request and width_request) but the image won't render if I wrap it in another container, I do not know why.
I also tried messing around with content_fit and tried all of them, yet no progress.
I even set the width and height properties of picture, and well it was just changing the size but the border being non circular, it was still present.
I also tried using Icon widget instead of Picture yet nothing.

I apologize if this is a dumb question, but would like to know how to fix it! Thanks in advanced!

[tr1xem]

use widgets.Icon

[randomboi404]

I also tried using Icon widget instead of Picture yet nothing.

...

[lost-melody]

Wrap your Picture in a Box with property halign: center.

Blueprint:

            Box {
                orientation: vertical;
                hexpand: true;
                Box {
                    halign: center;
                    Picture pic {
                        content-fit: scale_down;
                        styles [
                            "rond",
                        ]
                    }
                }
                Label {
                    label: "Play";
                }
            }

SCSS:

.rond {
    border-radius: 50%;
}

[randomboi404]

Yup I tried that but if I wrap the picture in another container (such as Box) it doesn't show at all for some reason.

[tr1xem]

Yup I tried that but if I wrap the picture in another container (such as Box) it doesn't show at all for some reason.

min-width min-height

[randomboi404]

tried them via css on image/picture widgets as well as used width and height request on box, result:

Like I said, for some reason it doesn't render when wrapped.

[randomboi404]

Hey, guys! I fixed it!

The error was that I was using child=widgets.Picture in box instead of child=[widgets.Picture] so was setting child as go object... Damn for some reason lsp didn't say anything and there were no logs regarding it! Anyways, thanks.