<!-- Default -->
<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">
<!-- Responsive -->
<img src="../../dummy/images/avatar.png" class="img-responsive" alt="Alternatieve tekst">
<!-- Rounded -->
<img src="../../dummy/images/avatar.png" class="img-rounded" alt="Alternatieve tekst">
<!-- Circle -->
<img src="../../dummy/images/avatar.png" class="img-circle" alt="Alternatieve tekst">
<!-- Thumbnail -->
<img src="../../dummy/images/avatar.png" class="img-thumbnail" alt="Alternatieve tekst">
<img src="{{path source }}"{{#if modifier }} class="{{ modifier }}"{{/if}} alt="{{ alt }}">
/* Default */
source: /dummy/images/avatar.png
alt: Alternatieve tekst
/* Responsive */
source: /dummy/images/avatar.png
alt: Alternatieve tekst
modifier: img-responsive
/* Rounded */
source: /dummy/images/avatar.png
alt: Alternatieve tekst
modifier: img-rounded
/* Circle */
source: /dummy/images/avatar.png
alt: Alternatieve tekst
modifier: img-circle
/* Thumbnail */
source: /dummy/images/avatar.png
alt: Alternatieve tekst
modifier: img-thumbnail
- Handle: @image
- Variants (5): Default , Responsive , Rounded , Circle , Thumbnail
- Preview:
- Filesystem Path: components\02-content\image\image.hbs
- Referenced by (5): @jumbotron, @jumbotron--button, @jumbotron--image, @jumbotron--image-button, @rich-content
Plaatst een afbeelding. Gebaseerd op de Bootstrap “Images” component
Afbeeldingen kunnen responsive-friendly worden gemaakt via het toevoegen van de .img-responsive class. Deze voegt ‘max-width 100%’, ‘height auto’ en ‘display block’ toe aan de afbeelding, zodat hij netjes met zijn parent meeschaalt.
Om afbeeldingen, die gebruik maken van .img-responsive, te centreren - gebruik .center-block in plaats van .text-center