Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use CSS’s native aspect-ratio property instead of percentage bottom padding for responsive boxes. For a full-width 16:9 frame, write width: 100%; aspect-ratio: 16 / 9; and leave its height automatic so the ratio can affect sizing.
Replace the padding trick with aspect-ratio
A modern responsive frame can be expressed directly:
.media-frame {
width: 100%;
aspect-ratio: 16 / 9;
}For a 4:3 box, use aspect-ratio: 4 / 3. The property specifies a preferred width-to-height ratio; it does not force dimensions that CSS has otherwise fixed. At least one dimension needs to be automatic for the preferred ratio to participate in sizing. For example, if both width and height are explicitly set, the ratio does not override them. See MDN’s aspect-ratio reference.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWhy percentage padding created a ratio
In horizontal writing modes, percentage padding is calculated from the containing block’s inline size—normally its width—not its height. A box with no intrinsic content height and padding-bottom: 56.25% therefore gains a height equal to 56.25% of its available width, producing a 16:9 shape. That behavior made the technique useful for responsive video wrappers before native aspect-ratio support was broadly available. MDN documents the calculation in its padding-bottom reference.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The native property states the intended relationship directly, making the layout easier to read and maintain. MDN describes its availability across browsers since September 2021; check the compatibility table against the oldest browsers your project must support.
Keep the frame ratio separate from media fitting
aspect-ratio shapes the box. It does not decide how an image or video fits inside it. If the media must fill the frame, size and position it separately, then select object-fit based on the desired result. cover fills the frame by cropping when ratios differ; contain keeps the whole image visible, which can leave empty space.
.media-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.media-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}Choose cover only when cropping is acceptable. If showing the full image matters more than filling every part of the frame, use contain.
Account for intrinsic image ratios
Replaced elements such as images can have intrinsic dimensions and an intrinsic ratio. If an image should use a temporary 16:9 ratio before its content loads and then honor its own intrinsic ratio, the property supports the form aspect-ratio: auto 16 / 9. Consult MDN’s guide to understanding and setting aspect ratios for the distinction between replaced and non-replaced elements.
Quick Recap
Best Value
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
Migration checklist
- Identify the intended frame ratio—for example, 16:9 or 4:3—and replace the percentage padding with
aspect-ratio. - Keep at least one dimension automatic. A common responsive setup is
width: 100%; height: auto; aspect-ratio: 16 / 9;, adjusted for the element and layout. - If media must fill the frame, set its dimensions and positioning separately, then choose
object-fitfor cropping or letterboxing. - Verify browser support for the project’s oldest required browser using MDN’s compatibility data; use a fallback only if that support requirement calls for one.
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.
