How to maintain a 100% responsive image ratio on Webflow with CSS?

Responsive isn't an option for your website. And yet...

Maintaining the correct ratio of your images as they are reduced or enlarged by responsive dynamics can be a real challenge.

That's why, in this article, we discuss a simple method (with a bit of mathematics) for maintaining the original aspect ratio of your images on Webflow, guaranteeing that they won't be cropped or distorted, whatever device you use.

The importance of aspect ratio in responsive design: Avoiding cropping problems

When an image is adapted to different screen sizes, cropping or distortion problems can arise. This is a fairly frequent problem, compromising the overall quality of the visual. To avoid these problems, it's best to define the size of your visuals - image or video - with ratios.

→ For better responsiveness: use ratios rather than fixed sizes (pixels, rem, etc.)

By maintaining the original aspect ratio, we ensure faithful representation on all devices, avoiding partial loss of potentially important visual content or image distortion.

How to maintain the aspect ratio of your CSS images on Webflow?

Ingredients:

• A Div Block
• An image element
• And a little mathematics

The recipe for a 100% responsive img ↓

1. Create a div block: In Webflow, select 'Add Elements', then choose 'Div Block'.
2. Change Div Block position to 'Relative' : In the Style panel, set the Div Block position to 'Relative'. This step is essential, as it ensures that the image we're about to insert will have its position defined in relation to this Div Block, and not to the entire page.
3. Add an image: Drag an image into the div block. Be sure to set its position to 'Absolute'. This step, combined with the 'Relative' div block position, ensures that the image is positioned relative to the div block.
4. Adjust image size : To maintain the image's aspect ratio, set its height and width to '100%' and change its Fit to 'Cover'. The Fit Cover allows the image to adapt to the size of the div block.
5. Maintain image ratio : To do this, add an inner padding percentage to your Div Block. The percentage you use depends on the ratio of your image. For example, for a 16:9 ratio, set the padding to 56.25%.

💡 How did we calculate the 56.25%? This is the result of dividing 9 by 16, multiplied by 100, to obtain a percentage. This ensures that the image retains its original aspect ratio, whatever the screen size.

Illustration of the tutorial in pictures

By following these steps, your images will fit perfectly on any device, without cropping or distortion, while retaining their original aspect ratio.

🎁 To easily retrieve different UI elements with the most requested image ratios, you can use the Relume Library →

Discover Relume Library on video

Bonus - Keeping the ratio of your images on Webflow - Video Tutorial

For those who prefer a more visual learning format, we've also created a comprehensive video tutorial on the same subject. In this video, we take you through each step of the process to make your images 100% responsive on Webflow, while maintaining the original aspect ratio.

Take a look, and don't hesitate to ask questions in the comments section if you encounter any problems or need more information.

_______

In conclusion, maintaining theaspect ratio of your images when adapted to different screen sizes is crucial to an optimal user experience on your Webflow site. By following the steps detailed in this guide, you can easily avoid the common problems of cropping or distorting your visuals.

Thanks to the use of div blocks and CSS positions 'Relative' and 'Absolute', combined with a simple mathematical rule for padding, your images will retain their original aspect ratio, whatever device your visitors are using. In this way, you ensure the quality and efficiency of your responsive design.

Remember, responsive design isn't an option, it's a necessity in thedigital age. Learn more about responsive design in this blog post.