Image displays at native size (or 100% container if container smaller that image width). In this example the image has a native width of 480px wide.
In this example the max container width (1280px) is smaller than the image native width (2560px) so the max image width is the same as the container.
<div class="ds-block">
<figure class="ds-figure">
<img src="{{ site.url }}/ltu-components/src/figure/snippets/images/lims-la-trobe-2560.jpg" alt="">
<figcaption class="ds-figure__figcaption">Figcaption</figcaption>
</figure>
<!--
NOTE: Where possible You should use the image srcset attribute to provide for responsive images.
For La Trobe squiz matrix use this:
<img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
srcset="{ 480 wide variety URL } 480w,
{ 720 wide variety URL } 720w,
{ 1024 wide variety URL } 1024w,
{ 1280 wide variety URL } 1280w,
{ full size (2056) image URL } 2560w" sizes="100vw">
-->
</div>You can place figures in column layout.
<div class="ds-block">
<div class="ds-column-layout">
<div class="ds-column-layout__column">
<figure class="ds-figure ds-figure--full-width">
<img src="{{ site.url }}/ltu-components/src/figure/snippets/images/lims-la-trobe-2560.jpg" alt="">
<figcaption class="ds-figure__figcaption">Figcaption</figcaption>
</figure>
</div>
<div class="ds-column-layout__column">
<figure class="ds-figure ds-figure--full-width">
<img src="{{ site.url }}/ltu-components/src/figure/snippets/images/lims-la-trobe-2560.jpg" alt="">
<figcaption class="ds-figure__figcaption">Figcaption</figcaption>
</figure>
</div>
</div>
<!--
NOTE: Where possible You should use the image srcset attribute to provide for responsive images.
For La Trobe squiz matrix use this:
<img src="{ full size (2056) image URL }" alt="" width="2560" height="1707"
srcset="{ 480 wide variety URL } 480w,
{ 720 wide variety URL } 720w,
{ 1024 wide variety URL } 1024w,
{ 1280 wide variety URL } 1280w,
{ full size (2056) image URL } 2560w" sizes="100vw">
-->
</div>