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
Twig
{% 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 %}
HTML
<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">