An image is a graphic representation of something (e.g photo or illustration). The borders have been added to these examples in order to help visualize empty space in the image frame.
Image
Overview
Usage
ImageFit Unset
Width set at 200
Height set at 100
Height set at 100, Width set at 200
Width set at 200
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.Unset Width="200" />
Height set at 100
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.Unset Height="100" />
Height set at 100, Width set at 200
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.Unset Height="100" Width="200" />
ImageFit None
Height set at 100, Width set at 200 => cropped to fit frame, positioned top left
Height set at 200, Width set at 200 => just placed at top left
Height set at 100, Width set at 200 => cropped to fit frame, positioned top left
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.None Height="100" Width="200" />
Height set at 200, Width set at 200 => just placed at top left
<Image Src="smallSampleImage.jpg" ImageFit=@ImageFit.None Height="200" Width="200" />
ImageFit Center
Height set at 100, Width set at 200 => cropped to fit frame, centered
Height set at 200, Width set at 200 => centered in frame space
Height set at 100, Width set at 200 => cropped to fit frame, centered
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.Center Height="100" Width="200" />
Height set at 200, Width set at 200 => centered in frame space
<Image Src="smallSampleImage.jpg" ImageFit=@ImageFit.Center Height="200" Width="200" />
ImageFit Contain
Height set at 100, Width set at 200 => fits largest dimension to available frame space
Height set at 200, Width set at 100 => fits largest dimension to available frame space
Height set at 100, Width set at 200 => fits largest dimension to available frame space
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.Contain Height="100" Width="200" />
Height set at 200, Width set at 100 => fits largest dimension to available frame space
<Image Src="sampleImage.jpg" ImageFit=@ImageFit.Contain Height="200" Width="100" />