Responsive image inside ktd-grid-item overflows starting at a certain window width

[arminus]

I have a very basic grid setup like this:

  cols = 12;
  rowHeight = 40;
  gap = 10;
  compactType: 'vertical' | 'horizontal' | null = 'vertical';
  layout: KtdGridLayout = [
    { id: '1', x: 0, y: 0, w: 6, h: 7 },
    { id: '2', x: 6, y: 0, w: 6, h: 7 },
    { id: '3', x: 0, y: 6, w: 6, h: 7 },
    { id: '4', x: 6, y: 6, w: 6, h: 7 },
  ];

every ktd-grid-item has an image with identical aspect rations with a css max-width: 95%; height: auto;

My problem is that up to a certain window width, the images scale in a way that they properly fit inside the ktd-grid-item,

but in full screen mode with a 1920 screen width, they overflow at the bottom:

(making the window smaller increases the vertical gap between the 2 rows - that would be kind of ok)

I've played with the rowHeight and h params of the KtdGridLayout but can't achieve anything so that the images would fully fit with all screen sizes.

Appreciate any idea or best practice...