The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Replace the percentage padding-bottom ratio trick with CSS aspect-ratio for modern responsive layouts. For example, width: 100%; aspect-ratio: 16 / 9; gives an element a preferred 16:9 shape while its height remains automatic.
How to replace the padding-bottom ratio hack
-
Set the desired ratio directly on the element. For a responsive 16:9 frame:
As an Amazon Associate I earn from qualifying purchases.
.media-frame { width: 100%; aspect-ratio: 16 / 9; } -
Keep at least one dimension automatic so the preferred ratio can affect sizing. If width is constrained by its container, the browser can calculate the height from the ratio.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Remove the old percentage padding used solely to create height. Keep padding only if the element genuinely needs interior spacing.
#1 Best Overall
Sale
HTML and CSS: Design and Build Websites- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
-
Check the result at the project’s target viewport sizes and against its required browser support.
What aspect-ratio changes—and what it does not
The aspect-ratio property expresses a preferred width-to-height relationship. It participates in sizing when at least one of width or height is automatic. If both dimensions are explicitly fixed, the ratio does not override them.
The ratio belongs to the box; it does not determine how an image or video is cropped or letterboxed inside it. For replaced elements such as images, intrinsic dimensions can also affect the result. MDN documents aspect-ratio: auto 16 / 9 as a way to use the supplied ratio until the content loads, then use the element’s intrinsic ratio.
Make media fill the frame when needed
Setting a frame’s ratio does not by itself stretch or crop its contents. If media must fill a frame, size and position the media separately, then choose object-fit based on the desired result.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.media-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.media-frame img,
.media-frame video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}object-fit: cover fills the frame by cropping excess content when necessary. Use object-fit: contain when preserving the full image or video matters more than filling every part of the frame; empty space may remain.
Why padding-bottom used to create a ratio
In horizontal writing modes, percentage padding is calculated from the containing block’s inline size—normally its width—not its height. So padding-bottom: 56.25% adds bottom padding equal to 56.25% of the available width. With no other content height, that produces a box approximately 16:9.
The technique was useful for responsive video and media wrappers before native ratio support was broadly available. It works, but its sizing logic is less obvious: a vertical padding value is being used to derive height from width. aspect-ratio: 16 / 9 states that relationship directly.
When a fallback is still worth considering
MDN marks aspect-ratio as Baseline and widely available across browsers since September 2021. That is broad support, not a guarantee for every browser version a project may need to serve. Check MDN’s compatibility table against the oldest required browser before removing a fallback.
Best Value
If legacy browser support is required, retain an appropriate fallback for those browsers; otherwise, the native property is the clearer default. Avoid keeping the padding trick automatically when the project’s support requirements no longer call for it.
Quick Recap
References
- MDN Web Docs: aspect-ratio
- MDN Web Docs: padding-bottom
- MDN Web Docs: Understanding and setting aspect ratios
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
