Cover-afbeelding
Afbeelding die de volledige breedte en hoogte van het uitgekozen object vult met de gekozen afbeelding.
Voeg de class image-cover toe aan het omliggende element waar de img zich in bevind of direct op het img-element.
Voorbeelden:
Op div
HTML-voorbeeld:
<div class="image-cover">
<img src="/img/strand.jpg" alt="Foto van het strand in schoorl">
</div>Op section
HTML-voorbeeld:
<section class="image-cover">
<img src="/img/strand.jpg" alt="Foto van het strand in schoorl">
</section>Op een tegel
Dit voorbeeld maakt gebruik van Tegelweergave.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.
HTML-voorbeeld:
<div role="group" class="tile image-cover">
<img src="/img/strand.jpg" alt="Foto van een strand">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
</div>Op een groep met tegels
Dit voorbeeld maakt gebruik van Tegelweergave.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.
HTML-voorbeeld:
<div class="tiles image-covers column-3">
<div role="group">
<img src="/img/strand.jpg" alt="Foto van een strand">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
</div>
<div role="group">
<img src="/img/strand.jpg" alt="Foto van een strand">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
</div>
<div role="group">
<img src="/img/strand.jpg" alt="Foto van een strand">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan non justo sit amet convallis. Phasellus auctor hendrerit fermentum. Ut et dui sapien.</p>
</div>
</div>Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via npm
CSS-voorbeeld:
@use "@minvws/manon/image-cover";