.object-fit-img {
  width: 100%;
}

/* Basis: zorg dat media-elementen blok en 100% breed zijn. */
[class*="ratio-ar-"] img,
[class*="ratio-ar-"] video,
[class*="ratio-ar-"] iframe,
[class*="ratio-ar-"] picture > img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;         /* hoogte volgt uit aspect-ratio */
}

/* .ratio-ar-parent,
.ratio-ar-parent  div,
.ratio-ar-parent  img,
.ratio-ar-parent  video,
.ratio-ar-parent  iframe,
.ratio-ar-parent  picture > img { height: 100%; } */

/* (optioneel) als je wil forceren dat het vlak exact gevuld wordt: */
/*
[class*="ratio-ar-"] img,
[class*="ratio-ar-"] video,
[class*="ratio-ar-"] iframe,
[class*="ratio-ar-"] picture > img {
  object-fit: cover;
}
*/

/* Mapping van klassen naar CSS aspect-ratio */
.ratio-ar-1x2  img,
.ratio-ar-1x2  video,
.ratio-ar-1x2  iframe,
.ratio-ar-1x2  picture > img { aspect-ratio: 1 / 2; }

.ratio-ar-4x7  img,
.ratio-ar-4x7  video,
.ratio-ar-4x7  iframe,
.ratio-ar-4x7  picture > img { aspect-ratio: 4 / 7; }

.ratio-ar-2x3  img,
.ratio-ar-2x3  video,
.ratio-ar-2x3  iframe,
.ratio-ar-2x3  picture > img { aspect-ratio: 2 / 3; }

.ratio-ar-4x5  img,
.ratio-ar-4x5  video,
.ratio-ar-4x5  iframe,
.ratio-ar-4x5  picture > img { aspect-ratio: 4 / 5; }

.ratio-ar-1x1  img,
.ratio-ar-1x1  video,
.ratio-ar-1x1  iframe,
.ratio-ar-1x1  picture > img { aspect-ratio: 1 / 1; }

.ratio-ar-2x1  img,
.ratio-ar-2x1  video,
.ratio-ar-2x1  iframe,
.ratio-ar-2x1  picture > img { aspect-ratio: 2 / 1; }

.ratio-ar-3x1  img,
.ratio-ar-3x1  video,
.ratio-ar-3x1  iframe,
.ratio-ar-3x1  picture > img { aspect-ratio: 3 / 1; }

.ratio-ar-3x2  img,
.ratio-ar-3x2  video,
.ratio-ar-3x2  iframe,
.ratio-ar-3x2  picture > img { aspect-ratio: 3 / 2; }

.ratio-ar-4x1  img,
.ratio-ar-4x1  video,
.ratio-ar-4x1  iframe,
.ratio-ar-4x1  picture > img { aspect-ratio: 4 / 1; }

.ratio-ar-4x3  img,
.ratio-ar-4x3  video,
.ratio-ar-4x3  iframe,
.ratio-ar-4x3  picture > img { aspect-ratio: 4 / 3; }

.ratio-ar-5x1  img,
.ratio-ar-5x1  video,
.ratio-ar-5x1  iframe,
.ratio-ar-5x1  picture > img { aspect-ratio: 5 / 1; }

.ratio-ar-5x2  img,
.ratio-ar-5x2  video,
.ratio-ar-5x2  iframe,
.ratio-ar-5x2  picture > img { aspect-ratio: 5 / 2; }

.ratio-ar-5x3  img,
.ratio-ar-5x3  video,
.ratio-ar-5x3  iframe,
.ratio-ar-5x3  picture > img { aspect-ratio: 5 / 3; }

.ratio-ar-5x4  img,
.ratio-ar-5x4  video,
.ratio-ar-5x4  iframe,
.ratio-ar-5x4  picture > img { aspect-ratio: 5 / 4; }

.ratio-ar-6x1  img,
.ratio-ar-6x1  video,
.ratio-ar-6x1  iframe,
.ratio-ar-6x1  picture > img { aspect-ratio: 6 / 1; }

.ratio-ar-8x1  img,
.ratio-ar-8x1  video,
.ratio-ar-8x1  iframe,
.ratio-ar-8x1  picture > img { aspect-ratio: 8 / 1; }

.ratio-ar-8x5  img,
.ratio-ar-8x5  video,
.ratio-ar-8x5  iframe,
.ratio-ar-8x5  picture > img { aspect-ratio: 8 / 5; }

.ratio-ar-16x9 img,
.ratio-ar-16x9 video,
.ratio-ar-16x9 iframe,
.ratio-ar-16x9 picture > img { aspect-ratio: 16 / 9; }

.ratio-ar-10x1 img,
.ratio-ar-10x1 video,
.ratio-ar-10x1 iframe,
.ratio-ar-10x1 picture > img { aspect-ratio: 10 / 1; }

.ratio-ar-10x3 img,
.ratio-ar-10x3 video,
.ratio-ar-10x3 iframe,
.ratio-ar-10x3 picture > img { aspect-ratio: 10 / 3; }