Images

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.

Responsive images

Images in DITA Bootstrap are made responsive with @scalefit="yes". This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

<image scalefit="yes" href="..." />

Image thumbnails

In addition to Bootstrap’s border-radius utilities, you can set @outputclass to img-thumbnail to give an image a rounded 1px border appearance.

<image outputclass="img-thumbnail" href="..." />

Separate images for dark and light mode

Use the @outputclass="d-auto", @outputclass="d-light", and @outputclass="d-dark" attributes on <image> elements to display different images when in dark mode.

 <fig>
  <image outputclass="img-thumbnail d-auto" href="..."/>
  <image outputclass="img-thumbnail d-light" href="..." deliveryTarget="html"/>
  <image outputclass="img-thumbnail d-dark" href="..." deliveryTarget="html"/>
</fig>
    

Support Lazy Loading

Use the @otherprops="loading(lazy)" attribute on <image> elements to wait until an image is on screen before loading.

<image otherprops="loading(lazy)" href="..."/>

Support HTML <picture> element

Use the @outputclass="d-picture" attributes on a <div> holding multiple <image> elements to display different images on different media. The @otherprops attribute defines the media query and/or image MIME type. The final <image> is the default.

<div outputclass="d-picture" deliveryTarget="html">
  <image otherprops="media(min-width: 700px)" href="...">
  <image otherprops="media(min-width: 450px)" href="..."/>
  <image otherprops="type(image/jpeg)" href="..."/>
  <image otherprops="type(image/webp)" href="..."/>
  <image href="..."/>
</div>