Image

Image component is a container for responsive images.

API Documentation
NOTE: All images are taken from the Bulma image docs page.

Example #

<Image Src="@StringConstants.StaticAssets_Images_Placeholders_128x128_png"
       Dimension="ImageDimension.Is128x128" />

Fixed square images #







<Image Dimension="ImageDimension.Is16x16" Src="@StringConstants.StaticAssets_Images_Placeholders_16x16_png" />
<br />
<Image Dimension="ImageDimension.Is24x24" Src="@StringConstants.StaticAssets_Images_Placeholders_24x24_png" />
<br />
<Image Dimension="ImageDimension.Is32x32" Src="@StringConstants.StaticAssets_Images_Placeholders_32x32_png" />
<br />
<Image Dimension="ImageDimension.Is48x48" Src="@StringConstants.StaticAssets_Images_Placeholders_48x48_png" />
<br />
<Image Dimension="ImageDimension.Is64x64" Src="@StringConstants.StaticAssets_Images_Placeholders_64x64_png" />
<br />
<Image Dimension="ImageDimension.Is96x96" Src="@StringConstants.StaticAssets_Images_Placeholders_96x96_png" />
<br />
<Image Dimension="ImageDimension.Is128x128" Src="@StringConstants.StaticAssets_Images_Placeholders_128x128_png" />

Rounded images #

<Image Dimension="ImageDimension.Is128x128"
       IsRounded="true" 
       Src="@StringConstants.StaticAssets_Images_Placeholders_128x128_png" />

Responsive images with ratios #

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.IsSquare" Src="@StringConstants.StaticAssets_Images_Placeholders_480x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is1by1" Src="@StringConstants.StaticAssets_Images_Placeholders_480x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is5by4" Src="@StringConstants.StaticAssets_Images_Placeholders_600x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is4by3" Src="@StringConstants.StaticAssets_Images_Placeholders_640x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by2" Src="@StringConstants.StaticAssets_Images_Placeholders_480x320_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is5by3" Src="@StringConstants.StaticAssets_Images_Placeholders_800x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is16by9" Src="@StringConstants.StaticAssets_Images_Placeholders_640x360_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is2by1" Src="@StringConstants.StaticAssets_Images_Placeholders_640x320_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by1" Src="@StringConstants.StaticAssets_Images_Placeholders_720x240_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is4by5" Src="@StringConstants.StaticAssets_Images_Placeholders_480x600_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by4" Src="@StringConstants.StaticAssets_Images_Placeholders_480x640_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is2by3" Src="@StringConstants.StaticAssets_Images_Placeholders_320x480_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is3by5" Src="@StringConstants.StaticAssets_Images_Placeholders_480x800_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is9by16" Src="@StringConstants.StaticAssets_Images_Placeholders_360x640_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is1by2" Src="@StringConstants.StaticAssets_Images_Placeholders_320x640_png" /></div>

<div class="mb-2" style="width: 10rem;"><Image Ratio="ImageRatio.Is1by3" Src="@StringConstants.StaticAssets_Images_Placeholders_240x720_png" /></div>
If you like BlazorExpress.Bulma, give it a star on GitHub!