Three img row

V000-48

Een view om 3 afbeeldingen weer te geven over de hele breedte van het scherm. Op mobiel staan ze op een vaste aspect ratio onder elkaar.

Hoe te gebruiken?

Kopieer onderstaande html en css in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<div class="three-img-row">
	<div class="row mx-0">
		<div class="col-12 col-lg-4">
			<nc-image name="img1" width="700"></nc-image>
		</div>
		<div class="col-12 col-lg-4">
			<nc-image name="img2" width="700"></nc-image>
		</div>
		<div class="col-12 col-lg-4">
			<nc-image name="img3" width="700"></nc-image>
		</div>
	</div>
</div>

CSS
Kopiëren.three-img-row img {
	aspect-ratio: 363/200;
	object-fit: cover;
	margin-bottom: 5px;
}

@media screen and (min-width: 768px) {
	.three-img-row img {
		aspect-ratio: 363/150;
	}
}

@media screen and (min-width: 992px) {
	.three-img-row img {
		aspect-ratio: 467/401;
	}
}