how to make a design width scale with height

This video features an old UI. Updated version coming soon!

In responsive web design, width and height properties are sized based on the content inside, but can be more specifically defined using pixels (px), percentages (%), ems, rems, viewport width (vw), viewport height (vh), viewport minimum and maximum (vmin and vmax), fractional units (fr), and character units (ch).

In this lesson, we'll cover each of these units, as well as minimum and maximum values, overflow, and object-fit.

In this lesson:

Automatic sizing
Pixels
Percentages
Ems
Rems
Viewport-based units
Fractional units
Character units
Minimum & maximum dimensions
Overflow
Object fit

Automatic sizing

By default, web elements are automatically sized based on what's inside them.

Pixels

Pixel values can scale proportionately with images and other elements that have an assigned pixel value.

To use the default pixel value:

Type a numeric value
Press Enter

Percentages

Like ems, percentage refers to the parent element's font size. If you have padding on a section and set your width to 25%, it will take up 25% of the space inside the element.

Ems

Ems are practical when you want to set proportional padding on an element with text. Every browser has a default font size, which is usually 16px. Ems look to their parent element and scale the font size proportionally.

If a font is 16 pixels:

1 em is 16 pixels
2 ems 32 pixels
1.5 ems Is 24 pixels

You can also set the font size on a paragraph's parent element, like a Div block:

Select the parent element
Change the font size (e.g. to 20 pixels) in the Style panel under Typography

When the parent element is 20 pixels:

1 em is now 20 pixels
2 ems is 40 pixels
3 ems — 60 pixels

Rems

Rems are relative to the HTML font size.

A rem is calculated by taking your rem value and multiplying it by the HTML font size (which respects the browser's font size unless you manually change it in the code). This has the benefit of respecting a user's browser preferences (if custom text size is set on the browser).

Rems look to the root (root ems) — they look to the HTML tag, which respects the browser's default font size unless you change it. (Rems ignore font set on the element, or the element's parent, and scale based on the font size of a browser.)

Viewport-based units

VW is a measurement of the width of the browser's viewport that scales proportionally based on the width of the viewport.

Fractional units

Fractional units (fr) work inside anything that's set to Grid.

If you have a 4-column grid, each column defaults to 1fr — 1 fr is equal to 1/4th of the grid. If you add a column, each fr is equal to 1/5th. You can change these values (e.g., set the first column to 2fr). Fractional units automatically scale things — everything is automatically calculated, including column gaps.

Check out our CSS grid course on Webflow University.

Character units

CH is great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line.

For example, If a paragraph has a maximum width of 60ch, it takes the selected font (the paragraph's typeface), and sets the paragraph's boundary (its box) to equal the width of 60 zeros.

CH lets you set the width on a text element when you're trying to limit the number of characters (based on the width of the font's zero character.)

Minimum & maximum dimensions

If you set the width of an element to be 50%, it takes up 50% of the space inside its parent element (the Section). As you resize the viewport, the element scales accordingly.

If you set a minimum (e.g., 200px) and a maximum (e.g., 500px) width on an element, it remains 50% wide and stays within the minimum (200 pixels) and maximum (500px) width the viewport shrinks and expands.

A common design pattern is to set up a full-height section (e.g., a height of 100vh). This isn't a problem until a browser gets shorter and elements begin to overflow or clip off at the bottom (which doesn't look too great).

Pro tip: Use minimums to remove any explicit height from a section, and instead set the minimum height to 100vh. Now your section won't get shorter than 100% of the viewport height.

If you want to set a section height at 800 pixels, setting it as minimum height means it'll be 800 pixels tall while respecting the width of its content (it can get taller if it needs to).

Say you never want a paragraph to go more than 60-ish characters wide, you can select any paragraph, click into the All Paragraphs tag and set a maximum width (e.g., 60ch). Now your default, unless you override it, will self-limit paragraphs at 60 characters (60 zeroes in whatever the typeface is).

Overflow

Overflow happens automatically when there's a width and height set on an element and not enough room for the content inside. By default, text that overflows is visible. If you select your element, click into the Style panel > Size > Overflow, you'll see the first icon, the visible (eye) icon, is selected by default, which means that the text that overflows defaults to visible.

Other options for overflow are:

Hide clips (hides) content outside the boundary of an element.
Scroll, depending on someone's operating system and browser, it can display a scroll bar so people can scroll through the contents of a Div block.
Auto allows people to scroll (only do this if there's enough content to overflow in the first place)

Object fit

‍

To use object fit, head to the Size section in the Style panel:

Set a width and a height on the parent element (e.g., the Div block)
Set a width and a height of 100% on the on the child element (e.g., your image inside the Div block)
Test the fit properties: fill, contain, cover, none, and scale down — choose the best option for your project

Note: Make sure parent elements have a width and a height when working with object fit. This is because all object fit options fit content inside a parent element, but object fit is set on the child of a parent.