I’m fairly new to front-end development and to React apps but I am building a web page with React where I have a featured section managed in a div that must keep a fixed aspect ratio. This div should remain centered within a parent div that expands to fit its maximum allotted space in the browser window (with properties position: relative, width: 100%, height: 100%). I would like the child div to keep a fixed width and height and dynamically adjust its scale (using the transform: scale() css properties) to remain appropriately centered with maintained space within the parent div regardless of the parent div’s changing dimensions due to the window being resized or other components changing the amount of space they may take up.
I found an instance of a react app that seems to do this well at the following link: https://papertrails.io/create
and I would like to replicate the functionality of the <section class=’print-frame”> element’s dynamic scaling within the parent element on this page. I would appreciate any advice on the best way to approach this.
So far, I have things set up to use hooks useState and useEffect to keep tabs on the parent div’s dimensions. I have set up the child with similar css properties as those on the page I’ve linked to as well to keep the section centered within the parent div (i.e. position: absolute, top: 50%, left: 50%, transform-origin: top left, transform: scale({scaleFactor}) translate(-50%,-50%)). The main difficulty i’m having at this point is figuring out the appropriate logic to replicate how the section is scaling dynamically in a similar manner to the linked page. Any suggestions would be greatly appreciated!