How can I make two CMS images in a slide responsive to different screen sizes in Webflow, while preserving the 16:9 aspect ratio of the images?
TL;DR
- Add a Slider and place CMS images inside a parent Div Block.
- Set each image width to 50% and maintain a 16:9 aspect ratio using padding-top: 56.25%.
- Ensure images are absolute positioned inside the container.
- Adjust responsive settings to stack images at 100% width on mobile.
- Link images dynamically to the CMS collection.
To make two CMS images responsive in a Webflow slider, while maintaining a 16:9 aspect ratio, follow these steps:
1. Set Up the Slider
- Add a Slider element from the Webflow components panel.
- Insert a Slide inside the slider and then add a Div Block to contain the images.
2. Structure the Image Container
- Wrap both CMS images within a parent Div Block.
- Set the Div Block to Flexbox (Horizontal, Centered, Wrapped) if needed.
3. Set Image Sizing with Aspect Ratio
- Select each Image element, and set the width to 50% (for two side-by-side images).
- To maintain the 16:9 aspect ratio, set the image’s height to auto.
- Alternatively, apply a Padding Hack:
- Set the parent Div Block’s width to 100%.
- Set the Div Block height to 0px.
- Apply padding-top: 56.25% (to maintain 16:9 ratio).
- Set the position of the CMS Image to Absolute (Full width & height inside the container).
4. Ensure Image Responsiveness
- On larger screens, images should remain side by side at 50% width.
- For mobile screens, adjust their width to 100% (stacked layout) using Webflow's responsive settings.
5. Link Images to CMS
- Use Dynamic Image elements to link images directly from the CMS collection.
- Ensure the correct collection list settings in the slider.
Summary
Set the image width to 50%, maintain 16:9 aspect ratio via padding-top: 56.25%, and use responsive breakpoints to make them stack on smaller screens. This ensures all CMS-driven images remain proportionally responsive.