clay
clay copied to clipboard
[Layout] Image horizontal and vertical sizing behaviors do not match
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:
When the outer container width is < 512, the image shrinks to fit:
But not when the outer container height is < 512:
Also, when the outer container width is < 128, the image is no longer centered: