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 Webflow’s aspect-ratio property or padding-bottom hack to maintain proportional scaling of divs.
- Place a child div inside each wrapper with absolute positioning and 100% width/height to scale content.
- Stack these aspect-ratio blocks vertically using Flexbox or block layout for responsive vertical alignment.
To scale divs with their content proportionally and ensure they maintain aspect ratios while stacking vertically, you can use Webflow’s padding and layout techniques similar to responsive embed behavior.
1. Use Aspect Ratio With Padding Hack or Aspect Ratio Property
- For legacy browsers, use the padding-bottom trick:
- Create a Wrapper Div with
position: relative. - Set its height to
0pxand apply a bottom padding percentage that reflects the aspect ratio.- Example: For a 16:9 ratio, set padding-bottom: 56.25%.
- For modern support (recommended), Webflow now supports the aspect-ratio CSS property:
- Select the parent div.
- Under the Style panel, scroll to the Size section and set
Aspect Ratioto something like 16 / 9.
2. Make Child Content Scale with the Wrapper
- Add a Child Div inside the wrapper.
- Set the Child Div to position: absolute, top: 0, bottom: 0, left: 0, right: 0, and width/height: 100%.
- Set object-fit: cover or contain depending on whether you want the content to crop or scale within.
- Use flexbox or grid inside the child div to lay out your content.
3. Stack Vertically
- Place each project (aspect ratio block) within a vertically-stacked container (e.g., a section or column).
- Set the parent layout to vertical Flexbox or Block Display.
- Each aspect-ratio block will now stack one on top of another.
4. Ensure Responsiveness
- The scaling will be responsive since the width of the wrapper div adjusts with screen size and height follows via the aspect ratio.
- Content inside the child div remains scaled proportionally using absolute positioning and flexible layout tools.
5. Optional: Use Webflow Components or Embed for Video-Like Behavior
- If you're displaying video/project previews, use Webflow’s Video element or a custom embed inside your aspect-ratio container with settings like width: 100% and height: 100%.
Summary
Use aspect-ratio settings or a padding-based ratio wrapper, combined with absolute-positioned, full-size child containers, to scale divs and their content responsively. Stack these divs vertically using Flexbox or natural document flow to replicate the layout behavior you referenced.