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
- Use a Slider with each Slide containing a flex container holding two Divs for CMS images.
- Apply 16:9 aspect ratio with padding-top: 56.25%, set image Divs to relative, and images to absolute with object-fit: cover for responsive scaling.
- Set flex-wrap for responsiveness, with 50% width on desktop and 100% width with vertical stacking on smaller breakpoints.
To display two CMS images in a slide responsively while maintaining a 16:9 aspect ratio, you’ll need to use Webflow’s aspect ratio control techniques combined with flexible layouts.
1. Set Up the CMS Slide Structure
- Use a Slider component from the Add panel to create your base layout.
- Within each Slide, insert a Div Block that will serve as a flex container for the two images.
- Set the container Div to Display: Flex, Direction: Row, and enable Wrap for smaller screens.
- Add two child Divs inside it—each will hold one CMS-bound image.
2. Apply the 16:9 Aspect Ratio to Image Containers
- For each image Div, apply a padding-top of 56.25% (which equals a 16:9 ratio) using the Padding property in the Style panel.
- Set the image Div’s Position to Relative.
- Inside each image Div, place an Image element set to pull from the CMS.
- Set the Image element to Position: Absolute with Full width and height (100%), and choose Object-fit: Cover.
3. Make Layout Responsive for Various Screen Sizes
- For the wrapper Div (containing the two image Divs), set flex-wrap: wrap so the images stack on smaller devices.
- Assign each image Div a Width: 50% on desktop, then adjust breakpoints by:
- Tablet: Change to Width: 100% or Stack Vertically if needed.
- Mobile Landscape and Below: Maintain stacking with 100% width.
- This ensures two side-by-side images on large screens and stacked layout on small screens, all while maintaining the 16:9 ratio.
4. Ensure Responsive Behavior Keeps the Aspect Ratio
- Because you're using padding-top for aspect ratio and absolute-positioned images, the image containers will scale with the browser while consistently maintaining 16:9.
- Avoid using fixed pixel heights, as that breaks responsiveness and aspect ratio.
Summary
To keep two CMS images in a slide responsive and maintain a 16:9 aspect ratio, wrap each in a Div with padding-top: 56.25% and position the Image absolutely inside with object-fit: cover. Use a flex container with responsive wrapping to adapt the layout for different screen sizes.