Images & Figures
Responsive image
Use .img-fluid class to the img tag to get responsive image.
<MudText Class="card-title mb-3">Use <code> .img-fluid </code>class to the img tag to get responsive image.</MudText>
<div class="text-center">
<MudImage Src="../assets/images/media/media-48.jpg" Class="img-fluid" Alt="img"></MudImage>
</div>Image With Radius
Use .rounded class along with .img-fluid to get border radius.
<MudText Class="card-title mb-3">Use <code>.rounded</code> class along with <code>.img-fluid</code> to get border radius.</MudText>
<div class="text-center">
<MudImage Src="../assets/images/media/media-49.jpg" class="img-fluid rounded-lg" Alt="img"></MudImage>
</div>rounded-lg Image
Use .rounded-pill class to img tag to get rounded-lg image.
<MudText Class="card-title mb-3">Use <code>.rounded-pill</code> class to <code>img</code> tag to get rounded-lg image.</MudText>
<div class="text-center">
<MudImage Src="../assets/images/media/media-50.jpg" class="img-fluid rounded-pill" Alt="img"></MudImage>
</div>Image Left Align
<MudImage Class="rounded-lg float-start" Src="../assets/images/media/media-53.jpg" Alt="img"></MudImage>Image Center Align
<MudImage Class="rounded-lg mx-auto d-block" Src="../assets/images/media/media-55.jpg" Alt="img"></MudImage>Image Right Align
<MudImage Class="rounded-lg float-end" Src="../assets/images/media/media-54.jpg" Alt="img"></MudImage>Figures
<figure class="figure">
<MudImage Class="bd-placeholder-img figure-img img-fluid rounded-lg" Src="../assets/images/media/media-56.jpg" Alt="img"></MudImage>
<figcaption class="figure-caption mt-1 fs-12">A caption for the above image.
</figcaption>
</figure>
<figure class="figure float-end">
<MudImage Class="bd-placeholder-img figure-img img-fluid rounded-lg" Src="../assets/images/media/media-57.jpg" Alt="img"></MudImage>
<figcaption class="figure-caption text-end mt-1 fs-12">A caption for the above image.
</figcaption>
</figure>Image Thumbnail
Use .img-thumbnail to give an image a rounded-lg 1px border.
<MudText Class="mb-3">Use <code> .img-thumbnail </code>to give an image a rounded-lg 1px border.</MudText>
<div class="text-center">
<MudImage Src="../assets/images/media/media-51.jpg" class="img-thumbnail" Alt="img"></MudImage>
</div>rounded-lg Thumbnail
Use .rounded-pill along with .img-thummbnail to get radius.
<MudText Class="mb-3">Use <code> .rounded-pill </code>along with <code> .img-thummbnail </code> to get radius.</MudText>
<div class="text-center">
<MudImage Src="../assets/images/media/media-52.jpg" class="img-thumbnail rounded-pill" Alt="img"></MudImage>
</div>