Fill Image The fill prop will stretch the image to fill up 100% width of its parent container, ignoring the image’s true width and height. Important Notes: Even though they are ignored, it is best practice to always define the width and height attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts. Demo Alt text.
{% include '@bolt-elements-image/image.twig' with { fill: true, attributes: { alt: 'Alt text.', src: 'path/image-800.jpg', srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w', sizes: '96vw', width: 800, height: 450, }, } only %}
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="96vw" width=800 height=450 class="e-bolt-image e-bolt-image--fill">