How can I scale divs with their content in Webflow so that the projects maintain their aspect ratio and stack on top of each other, similar to the example provided in the link?
To scale divs with their content in Webflow and maintain aspect ratio, you can use a combination of flexbox and some custom CSS. Here's how you can achieve this effect:
1. Start by creating a parent div or container that will hold your individual project divs. Set its display property to "flex" and flex-wrap to "wrap". This will ensure that the project divs stack on top of each other when the container width is not enough.
2. Inside the parent container, create a div for each project you want to display. Make sure each project div contains the relevant content, such as images or text.
3. By default, each project div will have a width that adapts to its content. However, to maintain an aspect ratio, we'll need to add some additional CSS.
4. First, set the project divs' flex-grow property to 1. This allows them to expand and take up available space in the container.
5. Next, apply a padding-bottom value to the project divs, expressed as a percentage. This value corresponds to the aspect ratio you want to maintain. For example, if you want a 16:9 aspect ratio, set the padding-bottom to 56.25% (9 divided by 16 multiplied by 100).
6. To ensure the content of the div is centered vertically and horizontally, add the following CSS properties to each project div:
- Set display to "flex".
- Set align-items to "center".
- Set justify-content to "center".
7. Finally, style the project divs as desired, applying background colors, borders, positioning, and other visual effects to create the desired look.
By following these steps, your project divs will scale with their content, maintain their aspect ratio, and stack on top of each other when the container width is limited.