Keep Image Size the same even after zooming in and out

I have a mat-sidenav component filled with mat-card components. Outside the sidenav, I have the rest of my page. What I would like is for my sidenav card components to keep the exact same size as someone is zooming in and out the page. I have illustrated what I mean:

The image on the left shows my page before zooming, the right side is after the zoom. The content outside the sidenav (the boxes) zoom and scale accordingly, my sidenav itself has a max width set that it does not exceed even after zooming (I have achieved this). My problem lies in the mat card components (represented as circles). I would like my mat cards to also remain the same size after zoom as seen in the image, however, they grow like my components outside the sidenav. My mat cards are also wrapped individually in an <a> tag. I need it as if zooming in and out does not effect the sidenav nor its contents at all, how can I achieve this?

I would suggest you to work with the CSS Units: vw and vh.

vw=1 is relative to 1% of the width of the viewport, while vw=100 is 100%. vh=1 is relative to 1% of the height of the viewport, while vh=100 is 100%.

The size will always adjust to the size of what you see. Therefore, even when you zoom in or zoom out, the viewport will stay the same and therefore, the sizes of your components won't change then.

You can test it out on these examples:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh