Blazor Image

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them.

Example #

By default images are responsive. The default value of the IsResponsive parameter is true.
placeholder
Razor 
<Image Src="/images/placeholder.png" Alt="placeholder" />

Image thumbnails #

To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true.
placeholder
Razor 
<Image Src="/images/placeholder.png" IsThumbnail="true" Alt="placeholder" />

Aligning images #

placeholder1 placeholder2
Razor 
<Image Src="/images/placeholder.png" Class="rounded float-start" Alt="placeholder1" />
<Image Src="/images/placeholder.png" Class="rounded float-end" Alt="placeholder2" />
placeholder
Razor 
<Image Src="/images/placeholder.png" Class="rounded mx-auto d-block" Alt="placeholder" />
placeholder
Razor 
<div class="text-center">
    <Image Src="/images/placeholder.png" Class="rounded" Alt="placeholder" />
</div>
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.2.0.
  • Powered by .NET 9.0.0
Links
Guides
Community