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?
TL;DR
- Use a wrapper div with
padding-bottom(e.g., 56.25%) andrelativeposition to maintain aspect ratio, with an inner absolutely positioned content div. - Stack these wrappers vertically using Flex (column) or Block layout, and ensure child content uses responsive units (%, vw/em) for proper scaling.
- Optionally, use Webflow’s native Aspect Ratio setting if available for a cleaner setup.
To scale div elements with their content in Webflow while maintaining aspect ratio and stacking them vertically, you can use a fixed aspect ratio technique combined with Flex or Grid layout. Here's how to do it.
1. Use a Padding-Bottom Hack to Maintain Aspect Ratio
- Webflow does not natively have aspect-ratio control (as of now), so you’ll use a CSS trick based on
padding-bottomto maintain the ratio. - Wrap your content in a container div (e.g., “Aspect Wrapper”), and set:
- Position:
relative - Padding-bottom: e.g.,
56.25%for a 16:9 aspect ratio - Height:
0px - Inside this wrapper, add another div (e.g., “Aspect Content”) with:
- Position:
absolute - Top/Bottom/Left/Right:
0 - Width/Height:
100% - This method scales the div and content proportionally based on its width.
2. Place the Divs in a Vertical Stack
- Create a parent container and set its Display setting to:
- Flex (vertical) or Block (default if you're just stacking).
- Add multiple instances of your "Aspect Wrapper" inside this parent to stack them vertically.
3. Make the Content Inside Each Div Scale
- Use Responsive Units (like % or vw/vh) and scalable typography (use
vworemunits) for text/images so that content scales with the parent div. - Avoid fixed pixel values unless necessary.
4. Optional: Use the Native Aspect Ratio Field (Beta)
- If your Webflow plan has access, use the Aspect Ratio property in the Styles panel:
- Select the outer
divand setAspect Ratioto16:9,4:3, etc. - This approach is cleaner, but still in beta or subject to changes.
5. Ensure the Divs Stack Responsively
- Use 100% width for the outermost divs so they respond to screen size.
- Inside responsive containers (like section, container, etc.), the scaling maintains ratio and stacks based on the flow you define (Flex/Block/Grid).
Summary
To scale divs and keep their aspect ratio while stacking, use a padding-bottom ratio technique with absolutely positioned inner content and stack them using Flex or Block display. Alternatively, use Webflow’s Aspect Ratio setting if available. Use fluid/responsive units inside the divs to make content scale accordingly.
