Set image height based on the image width used in browser...

When using background image in a div as the image element (I mostly use this), its always a bit annoying having to set the image height for every media queries manually. And its never perfect with all the different media resolutions out there.

If you set the image to 100% width, it would have been very nice if I could just set the height to a specific aspect ratio of the width directly in Webflow. e.g. the height of the image should always be 65% of the image width used in the browser. Its possible with custom code, but it would be a nice feature to have in Webflow too.


Admin Note:
This is currently possible with background images by setting bottom or top padding to a percentage on an element with a background set (such as 50%). Keep in mind that any text or additional children elements inside of that element would need to be set to absolute positioning.

  • Christoffer Furnes
  • Jul 9 2019