MudBlazor - Blazor Component Library

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"/>

Image Fit

Use ObjectFit to controll how a image should be resized.

None

Cover

Contain

Fill

ScaleDown

<div class="d-flex justify-center">
    <MudImage ObjectFit="@ImageFit" Height="200" Width="400" Src="images/castle.jpg" Alt="Örebro Slott"  Elevation="25" Class="rounded-lg"/>
</div>

<MudChipSet T="string" CheckMark Class="mt-12">
    <MudChip Text="None" OnClick="@(() => SetImageFit(ObjectFit.None))" SelectedColor="Color.Primary" />
    <MudChip Text="Cover" OnClick="@(() => SetImageFit(ObjectFit.Cover))" SelectedColor="Color.Primary" Default="true"/>
    <MudChip Text="Contain" OnClick="@(() => SetImageFit(ObjectFit.Contain))" SelectedColor="Color.Primary" />
    <MudChip Text="Fill" OnClick="@(() => SetImageFit(ObjectFit.Fill))" SelectedColor="Color.Primary" />
    <MudChip Text="ScaleDown" OnClick="@(() => SetImageFit(ObjectFit.ScaleDown))" SelectedColor="Color.Primary" />
</MudChipSet>

@code {
    ObjectFit ImageFit = ObjectFit.Cover;

    void SetImageFit(ObjectFit value)
    {
        ImageFit = value;
    }
}