Image

Component preview opent in nieuw tabblad

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

<!-- Default -->
<img src="../../dummy/images/sneeuwpop.png" alt="Afbeelding van een sneeuwpop">
<!-- Responsive -->
<img src="../../dummy/images/sneeuwpop.png" class="img-responsive" alt="Afbeelding van een sneeuwpop">
<!-- Rounded -->
<img src="../../dummy/images/sneeuwpop.png" class="img-rounded" alt="Afbeelding van een sneeuwpop">
<!-- Circle -->
<img src="../../dummy/images/sneeuwpop.png" class="img-circle" alt="Afbeelding van een sneeuwpop">
<!-- Thumbnail -->
<img src="../../dummy/images/sneeuwpop.png" class="img-thumbnail" alt="Afbeelding van een sneeuwpop">
<img src="{{ source | path }}" {{ className(modifier) }} alt="{{ alt }}">
/* Default */
__title: default
source: /dummy/images/sneeuwpop.png
alt: Afbeelding van een sneeuwpop
/* Responsive */
__title: responsive
source: /dummy/images/sneeuwpop.png
alt: Afbeelding van een sneeuwpop
modifier: img-responsive
/* Rounded */
__title: rounded
source: /dummy/images/sneeuwpop.png
alt: Afbeelding van een sneeuwpop
modifier: img-rounded
/* Circle */
__title: circle
source: /dummy/images/sneeuwpop.png
alt: Afbeelding van een sneeuwpop
modifier: img-circle
/* Thumbnail */
__title: thumbnail
source: /dummy/images/sneeuwpop.png
alt: Afbeelding van een sneeuwpop
modifier: img-thumbnail