In Webflow, how can I make images continue to resize when shrinking the browser height, but not the width?

Published on
September 22, 2023

To make images continue to resize when shrinking the browser height, but not the width in Webflow, you can follow these steps:

  1. Select the image element on your Webflow canvas.
  2. In the right-hand panel, click on the "Settings" tab.
  3. Under the "Size" section, make sure the width of the image is set to a percentage value, such as 100% or any other value that suits your design.
  4. Next, go to the "Position" section within the same panel.
  5. Under the "Position" section, you will find the "Width" property.
  6. Change the "Width" property from "Auto" to "Fit Content".
  7. Now, the image will resize horizontally with the browser's width, but not vertically when the browser height shrinks.

This method allows the image to adapt to different screen sizes and maintain its aspect ratio while resizing based on the width, keeping the height intact.

By following these steps, you can design your website in Webflow to ensure that images continue to resize when shrinking the browser height but not the width, providing a responsive and optimized user experience.

Additional Questions:

  1. How do I make an image responsive in Webflow?
  2. Can I set different image sizes for different screen breakpoints in Webflow?
  3. How can I set a maximum width for an image in Webflow?