PX to Percent Converter
Convert pixel values to percentages based on the parent container size. Essential for building fluid, responsive CSS layouts.
Formula
% = (px ÷ parent width) × 100
Quick Reference Table
How CSS Percentages Actually Work
Percentage in CSS is always relative to something, but what it is relative to depends on which property you are using. This is the single most confusing part about percentages, and the reason many developers get unexpected results.
widthRelative to the parent element's width. A 50% width child inside a 1000px parent is 500px wide.
heightRelative to the parent element's height. But only works if the parent has an explicit height set. Otherwise, the percentage is ignored.
paddingAlways relative to the parent's width, even for padding-top and padding-bottom. This is the "aspect ratio trick" that was used before the aspect-ratio property existed.
font-sizeRelative to the parent's font-size. 120% on an element with a 16px parent becomes 19.2px. Works the same as using 1.2em.
Building Grid Systems with Percentages
.row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.col-4 { width: calc(33.333% - 1rem); }
.col-6 { width: calc(50% - 0.75rem); }
.col-8 { width: calc(66.666% - 0.5rem); }
.col-12 { width: 100%; }
/* Responsive: stack on mobile */
@media (max-width: 48rem) {
.col-4, .col-6, .col-8 { width: 100%; }
}/* Image never exceeds its container */
img {
max-width: 100%;
height: auto;
}
/* Two-column image gallery */
.gallery-item {
width: calc(50% - 0.5rem);
}
/* Three-column on desktop, two on tablet, one on mobile */
.gallery-item {
width: 100%;
}
@media (min-width: 600px) { .gallery-item { width: calc(50% - 0.5rem); } }
@media (min-width: 960px) { .gallery-item { width: calc(33.333% - 0.67rem); } }/* 16:9 aspect ratio container */
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9/16 = 0.5625 = 56.25% */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Modern alternative (better): */
.video-wrapper-modern {
aspect-ratio: 16 / 9;
width: 100%;
}Percentage vs Other Relative Units
The Most Common Percentage Mistake
Setting height: 50% and seeing nothing happen is the most common frustration with percentages. The reason: percentage height only works when the parent has a defined height. If the parent is set to height: auto (the default), the browser cannot calculate 50% of "auto," so it ignores the percentage entirely.
The fix: either set an explicit height on the parent (like 100vh or a pixel value), or use a flexbox/grid layout where the child can grow to fill available space. With flexbox, you can use flex: 1 instead of a percentage height, and it will work without any parent height declaration.
Width percentages do not have this problem because block elements have a default width determined by the parent (it is always a specific number, never "auto" in the same way). That is why width: 50% always works but height: 50% often does not.
Frequently Asked Questions
How do I convert px to percent?
Divide the pixel value by the parent element's size, then multiply by 100. If the parent is 960px wide and you want a 240px element, that is 240 / 960 x 100 = 25%.
What is percentage based on in CSS?
It depends on the property. For width, percentage is relative to the parent's width. For height, it is relative to the parent's height. For font-size, it is relative to the parent's font-size. For padding and margin, it is always relative to the parent's width, even for top and bottom.
When should I use percent in CSS?
Use percentages for fluid grid columns, responsive images, container-relative widths, and any layout where child elements should scale proportionally to their parent container.
What is the difference between % and vw?
Percentage is relative to the parent element. VW is relative to the browser viewport. A 50% div is half of its parent, while 50vw is always half the screen width regardless of what container it sits in.
Why does percentage padding use the parent width?
In CSS, top and bottom padding in percentage is calculated from the parent's width, not height. This is by design and is actually useful for creating aspect ratio boxes. A padding-top of 56.25% on a full-width element creates a 16:9 ratio.
How do I make a responsive grid with percentages?
Set column widths as percentages that add up to 100% (minus gaps). For a 3-column grid: each column at 33.333%. With gaps, use calc: width: calc(33.333% - 1rem) with a 1.5rem gap.
Can I use percentage for font-size?
Yes. 100% equals the parent's font-size. So 120% on an element whose parent has 16px font-size gives you 19.2px. This is similar to using em (1.2em would give the same result).
What happens with percentage on a height property?
Percentage height only works if the parent element has an explicit height set. If the parent height is auto (the default), a percentage height on the child will be ignored. This is one of the most common CSS frustrations.
How does max-width with percentage work?
max-width: 100% is commonly used on images to make them responsive. The image will never be wider than its parent container, but can shrink smaller. This is the foundation of responsive image sizing.
What is the difference between percentage and fr units?
Percentages work in any layout context. Fr units only work in CSS Grid. Fr distributes available space after fixed sizes are accounted for, while percentage is always relative to the full parent width.
Can I mix percentage with other units in calc?
Yes. calc(100% - 2rem) is very common for full-width minus fixed padding. You can combine percentage with px, rem, em, vw, and any other CSS length unit inside calc().
How do I center an element with percentage?
You can use margin: 0 auto with a percentage width, or use left: 50% with transform: translateX(-50%). For modern layouts, flexbox or grid centering is simpler and more reliable.
Disclaimer: This tool provides approximate conversions for reference purposes. Results may vary slightly depending on browser rendering, root font size, and viewport settings. Always verify values in your specific development environment.