I'm trying to build a page with a map that responds to the user resizing the browser. When the window is smaller than a certain size, I want the map to shrink, maintain its aspect ratio (3:4) and zoom level (integer only). However, by modifying the CSS width and height of the map and the canvas, the map's edges start shrinking. I want the map to keep the same bounds.

I've tried something like this:

let bounds = map.getBounds();
//dynamically resize the map when the window is smaller than a certain width
map.resize();
map.fitBounds(bounds);

This code does 2/3 things: shrink and maintain aspect ratio, but the zoom level changes. Is there any way to do this? I was thinking of transforming the map contents without touching the zoom level of the map, but I don't know if that's possible.