Is there a way to prevent content reflow from lazy-loading images if both max-width and max-height are already set?

On the website I am working on, I am trying to prevent content reflow from occurring when images load. I'm using React. In my particular situation, my solution must:

• Work with images of different aspect ratios. (e.g. if it's a 3:2 image, it stays 3:2. If it's 16:9, it stays 16:9)
• Support max-height and max-width CSS attributes. (In my case, max-height = 60vh; and max-width = 100%;, if that helps.)

I have read about the padding-top or padding-bottom approaches. They do not work because of point #1, since the padding-top and padding-bottom must be hardcoded and the images do not all have the same aspect ratio. When I use JSX to dynamically change the padding-top and padding-bottom, it begins distorting when the image hits the max-height or max-width. I do not know what else I can do.

Thanks!