Collapse Sidebar




The ScaleType property determines in what way an ImageButton/Image is rendered when the UI element’s absolute size differs from the source image’s size.

By default, this property is Enum/ScaleType/Stretch, which will simply stretch/compact the image dimensions so it fits the UI element’s space exactly. Since transparent pixels are set to black when uploading to the Roblox website, transparent images should apply alpha blending to avoid a blackish outline around scaled images.

For Enum/ScaleType/Slice, the ImageButton/SliceCenter property will be revealed in the Properties window. This is for nine-slice UI: when scaling up, the corners will remain the source image size. The edges of the image will stretch to the width/height of the image. Finally, the center of the image will stretch to fill the center area of the image.

Finally, for Enum/ScaleType/Tile, the ImageButton/TileSize property will be revealed in the Properties window. This is for tiled images, where the size of each image tile is determined by the ImageButton/TileSize property.

Code Samples

Image ScaleType Demo

This code sample demonstrates the different ScaleType options - Stretch, Tile and Slice. It does this by resizing an ImageLabel/ImageButton in a circle.