Usage
MudImage is used to embed an image in an HTML page. Images are not technically inserted into a page, but are linked to a file.
The component represent the <img> tag and creates a holding space for the referenced image.
<MudImage Src="images/mony.jpg" Alt="Mony the dog" Elevation="25" Class="rounded-lg"/>
Size
Size can be directly set on the image with the Width and Height property, it can also be useful to set this even if you want a responsive image, setting them will make the image take up set space even before they are loaded which can be useful if your pictures takes long time to load.
<MudImage Src="images/sweden.jpg" Width="200" Height="150" Alt="Swedish Farm House" Elevation="25" Class="rounded-lg ma-4"/> <MudImage Src="images/sweden.jpg" Width="332" Height="250" Alt="Swedish Farm House" Elevation="25" Class="rounded-lg ma-4"/>
Responsive Images
To get responsive images set the Fluid property to true. This applies max-width: 100%; and height: auto; so the image scales with the parent's width.
Resize the example bellow to see how the image scales with the parents with.
<MudImage Fluid="true" Src="images/iceland.jpg" Alt="Swedish Farm House" Class="rounded-lg"/>