Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
LightPress

Possible Fix for Maintaining Background Image/Video Aspect Ratio

Question

Had a hard time finding any answers on how to maintain a specific, responsive aspect ratio for Brine Family index sections with background videos. My client has a full width background video that needs to avoid cropping, and this was the best solution I could figure out.

Does anyone know how to calculate the padding for other aspect ratios, like 3:4? 

I will post a link to the site when it is live.

section#your-section-url { 
position: relative; 
width: 100%; 
padding-top: 56.25%; /* 16:9 Aspect Ratio */ }

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

Nice.

To do other aspect ratios, just divide the second number by the first then multiply by 100

E.g.

16:9 — 9/16 = .5625 * 100 = 56.25

3:4 — 4/3 = 1.333 * 100 = 133

 

Hope this helps!

-=b=-

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...