How to force a custom ratio (4:3, 16:9) on section background images or videos

Sometimes you want a section to keep a certain proportions or height-to-width ratio (e.g. 16:9 is usual for videos), rather than change the height based on the content size.

With small amount of CSS, we can achieve by changing min-height value for the section itself. Best thing

Calculate your media ratio

First, we need to calculate a new value by dividing height by width:

9 / 16 = 0,5625
3/4 = 0.75

It also works with vertical oriented media too (3/4):

4/3 = 1.25

And even completely custom dimensions, e.g. 650px x 750px:

650/750 = 0.866

Convert into vw

We’re assuming the background is taking full screen, so we can use viewport units (vw). We also need to multiply value by 100:

56.25vw /* 16:9 */
75vw /* 4:3 */
125vw /* 3:4 */
86.66vw /* 650px:750px */

Apply CSS to section

Find section ID, then apply min-height to it. We’ll use !important to override the current value. Replace section ID and add to Pages › Website Tools › Custom CSS

/* 16:9 */

[data-section-id="6739cc48a1c63d7f98a758ef"] {
 min-height: 56.25vw !important; 
}

[data-section-id="6739cc48a1c63d7f98a758ef"] {
 min-height: 56.25vw !important; 
}

/* 4:4 */

[data-section-id="6739cc48a1c63d7f98a758ef"] {
 min-height: 75vw !important; 
}

/* 3:4 */

[data-section-id="6739cc48a1c63d7f98a758ef"] {
 min-height: 125vw !important; 
}