Is there a way to maintain aspect ratio while also make sure the height/width doesn't exceed certain threshold?

I am currently working on a page for which page I need to maintain the image aspect ratio of 16/9 and ensure vertical scrollbar never shows up. So, I first took up the viewport height and calculated the width. Which would look like this

const height =viewPortHeight
const width =(viewPortHeight * 16) / 9

<div>
  <img style={{height:height, width :width}} />
</div>

Which works perfectly for a lot of screen sizes. But, for some screen sizes, the width exceeds the viewport width, thus, horizonal scrollbar shows up. So, I am stuck here and can't think of a way to achieve this. Without this feature implemented, this page I have built is totally useless. Can someone help me with this please??

For more info, here is the codesandbox link

Note that the frame/image is inside the Canvas. So, we can't use CSS properties? I don't know