ScaleType

Description:

The ScaleType property determines in what way an ImageLabel/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|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|Enum.ScaleType.Slice, the ImageLabel/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|Enum.ScaleType.Tile, the ImageLabel/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 ImageLabel/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.

				
					Image ScaleType Demo
				
					Expected Output
				
					Expand
					
			local imageLabel = script.Parent

-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black

local function resizeInACircle()
	for theta = 0, 2, .02 do
		imageLabel.Size = UDim2.new(
			0, 100 + math.cos(theta*2*math.pi) * 50,
			0, 100 + math.sin(theta*2*math.pi) * 50
		)
		wait()
	end
end

while true do
	-- Stretch simply stretches the source image to fit
	-- the UI element's space
	imageLabel.ScaleType = Enum.ScaleType.Stretch
	resizeInACircle()	
	-- Tile will render the source image multiple times
	-- enough to fill the UI element's space
	imageLabel.ScaleType = Enum.ScaleType.Tile
	imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
	resizeInACircle()	
	-- Slice will turn the image into a nine-slice UI.
	imageLabel.ScaleType = Enum.ScaleType.Slice
	imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
	resizeInACircle()	
end
		
				Copy Code
			
				Light Theme