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

Possible Fix for Maintaining Background Image/Video Aspect Ratio



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 */ }
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0


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


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

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


Hope this helps!



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...