clay icon indicating copy to clipboard operation
clay copied to clipboard

[Layout] Image horizontal and vertical sizing behaviors do not match

Open pdoane opened this issue 8 months ago • 0 comments

Using commit e4e7b113a9456e6374c6f482ccb6bc0a72c6f39d (current latest commit on main).

I am trying to center an image in a container where it will shrink to fit down to a minimum size.

    CLAY({
        .layout = {
            .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
            .childAlignment = {.x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER},
        },
    })
    {
        CLAY({
            .layout = {
                .sizing = {
                    .width = CLAY_SIZING_GROW(128, 512),
                    .height = CLAY_SIZING_GROW(128, 512),
                },
            },
            .image = {
                .imageData = (void*)(uintptr_t)s_testTexture.handle,
                .sourceDimensions = {.width = 512, .height = 512},
            },
        })
        {}
    }

Image is properly centered when the container is larger than the image:

Image

When the outer container width is < 512, the image shrinks to fit:

Image

But not when the outer container height is < 512:

Image

Also, when the outer container width is < 128, the image is no longer centered:

Image

pdoane avatar May 02 '25 15:05 pdoane