Images and Figures

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Info

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

HTML

<img class="img-thumbnail" src="{...}.png" />

Logi XML

<Image Caption="{...}.png" Class="img-thumbnail" />

Responsive image

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<Image AltText="..." Caption="..." Class="img-fluid" />

Images Thumbnail

<Image AltText="..." Caption="..." Class="img-thumbnail" />

Images Rounded

<Image AltText="..." Caption="..." Class="rounded" />

Image Circle

<Image AltText="..." Caption="..." Class="rounded-circle" />

Float left

<Image Caption="..." Class="img-fluid float-left" />

Center

<Division HtmlDiv="True" Class="text-center">
  <Image Caption="..." Class="img-fluid" />
</Division>

Float right

<Image Caption="..." Class="img-fluid float-right" />

Figures

Documentation and examples for displaying related images and text with the figure component in Bootstrap.

Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 figure and figcaption elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your img to make it responsive.

A caption for the above image.

<Division Class="figure">
  <Image Caption="..." Class="figure-img img-fluid rounded" />
  <Label Caption="A caption for the above image." HtmlTag="P" Class="figure-caption" />
</Division>
<Division Class="figure">
  <Image Caption="..." Class="figure-img img-fluid rounded" />
  <Label Caption="A caption for the above image." HtmlTag="P" Class="figure-caption text-right" />
</Division>