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 div with percent-based padding-top to simulate aspect ratio (e.g., 56.25% for 16:9), and set its position to relative.
- Add an absolute-positioned inner div to fill the parent, make its content responsive using relative units, and stack multiple wrappers vertically using block, flex (vertical), or grid layouts.
To scale divs with their content in Webflow—while keeping a consistent aspect ratio and making sure they stack vertically like the referenced layout—you'll want to use specific sizing techniques combined with Flexbox or Grid.
1. Use Padding for Aspect Ratio
- Webflow does not have native “aspect ratio” controls yet (as of 2024), but you can simulate it using percent-based padding.
- Add a div block and give it a class (e.g.,
project-wrapper). - Set the height to auto, and apply top padding based on the desired ratio. For example:
- 56.25% = 16:9 ratio,
- 100% = 1:1 square,
- The formula is:
aspect ratio height ÷ width x 100.
2. Set to Position: Relative and Add Absolute Children
- Set the
project-wrapperposition to Relative. - Inside the wrapper, add a second div (e.g.,
project-content). - Set
project-contentto Position: Absolute, inset: 0 (top/right/bottom/left: 0) so it fills the parent. - All content inside this
project-contentdiv will now scale with the parent, maintaining the aspect ratio.
3. Style Content to Be Responsive
- Use % widths, VW/VH units, or relative text/image sizes inside
project-contentto keep everything scaled. - Avoid setting fixed pixel heights, which break the responsiveness.
4. Stack Projects Vertically
- Wrap multiple
project-wrapperdivs inside a parent container set to Display: Block or Flex Vertical. - Set margin-bottom on each project wrapper to control spacing.
- Do not float elements or use columns if you want simple vertical flow.
5. Optional: Use Webflow’s Grid
- Alternatively, you can use Webflow's Grid layout with 1 column if you want more control for tablet/mobile.
- Each grid item can use the same padding-aspect trick.
Summary
To maintain aspect ratio and vertical stacking in Webflow, use padding-top for proportional height, absolute-positioned content divs, and vertical flow with block/flex/grid. This ensures each project scales properly with its content and stacks as intended.