As someone new to the world of JavaScript, CSS, and HTML, I am eager to learn how to create a game site with multiple games. However, I am feeling lost when it comes to determining the right direction to take. My goal is to develop a game board that can adjust its size dynamically based on the browser's height and width while preserving its original aspect ratio. Additionally, the elements within the game board should resize proportionately with their parent container. While I have experimented with Bootstrap 4's col, row, and container classes, I am struggling to achieve the desired outcome using the container class alone. Recently, I came across a technique involving some other element, which seemed promising in achieving this effect. Can anyone provide me with a clearer understanding of how to implement this?
An excellent example showcasing the resizing functionality I aim for can be found on this website: . By clicking "play game" at the top and adjusting the browser's dimensions, you can observe how the layout adapts seamlessly along with all child elements. This is precisely the effect I aspire to replicate in my own project.