Si has pasado más de diez minutos diseñando una página web, es probable que te hayas chocado con el clásico muro de CSS: intentar averiguar exactamente qué ancho tiene en píxeles un div del 50%.
A veces, CSS parece como intentar seguir una receta donde las medidas son simplemente «un poco de harina» y «un chorro de agua». Quieres números exactos, pero CSS te da proporciones relativas.
¿La buena noticia? Convertir porcentajes a píxeles no es magia negra. En realidad, es solo aritmética básica, y una vez que entiendas la regla de oro de los porcentajes en CSS, nunca más tendrás que adivinar las dimensiones de tu diseño.
Vamos a desglosarlo paso a paso.
La regla de oro: Todo depende del padre
Antes de hacer cualquier cálculo, debemos hablar de cómo piensa CSS.
Imagina que tienes un marco de fotos gigante y vacío colgado en la pared. Ese marco tiene 1000 píxeles de ancho. Si le dices a una foto que ocupe el 50% del espacio, ocupará la mitad del marco (500 píxeles).
En CSS, ese marco de fotos se llama contenedor padre. Un valor porcentual en CSS no existe en el vacío. Siempre, siempre, siempre es un porcentaje de su padre directo.
Si no conoces el tamaño del contenedor padre, no puedes calcular el valor en píxeles del hijo. ¡Es así de sencillo!
Las matemáticas sencillas tras la conversión
Una vez que conoces el ancho (o alto) en píxeles de tu contenedor padre, el cálculo es directo. Aquí tienes la fórmula:
(Tamaño del padre en píxeles × Porcentaje) ÷ 100 = Píxeles finales
Supongamos que tu <div> padre mide 800px de ancho y quieres que un <div> hijo tenga un ancho del 75%.
-
800 × 75 = 60.000
-
60.000 ÷ 100 = 600px
Tu contenedor hijo se renderizará con exactamente 600 píxeles de ancho.
Ejemplo paso a paso: Poniéndolo en práctica
Veamos un caso del mundo real. Estás creando el diseño clásico de un blog: un área de contenido principal y una barra lateral, ubicadas una al lado de la otra dentro de un contenedor envolvente (wrapper).
Aquí tienes tu HTML:
<div class="wrapper">
<div class="main-content">Este es el artículo.</div>
<div class="sidebar">Esta es la barra lateral.</div>
</div>Aquí tienes tu CSS:
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Paso 1: Identifica al padre
El padre de tanto .main-content como de .sidebar es el .wrapper.
Paso 2: Encuentra el valor en píxeles del padre
Observando nuestro CSS, el .wrapper tiene un valor fijo de 1200px.
Paso 3: Haz los cálculos
-
Contenido principal: (1200 × 70) ÷ 100 = 840px
-
Barra lateral: (1200 × 30) ÷ 100 = 360px
Si inspeccionas esos elementos en las herramientas de desarrollo de tu navegador, verás que equivalen exactamente a 840px y 360px.
Los momentos imprevistos: Padding, Margins y Box-Sizing
En un mundo perfecto, esas matemáticas son todo lo que necesitarías. Pero CSS tiene una forma engañosa de alterar nuestros cálculos: el modelo de caja (box model).
Por defecto, si le dices a una caja que tenga un ancho del 50% y luego le añades 20px de relleno (padding), CSS suma esos 20px por encima del 50%. De repente, tu caja es más ancha de lo que habías calculado y todo tu diseño se desplaza a la línea siguiente.
La solución: Usa siempre box-sizing: border-box;.
* {
box-sizing: border-box;
}Piensa en border-box como decirle a tu navegador: «Cuando digo 50%, me refiero al 50% total, incluyendo el relleno y los bordes. Calcúlalo tú mismo». Esto mantiene precisas tus conversiones a píxeles y evita que se rompa el diseño.
Nota: Los márgenes se siguen aplicando fuera de la caja, ¡así que tendrás que tenerlos en cuenta por separado!
Tu guía rápida de referencia
¿No quieres sacar la calculadora cada vez que escribes CSS? Aquí tienes una tabla de referencia rápida para los porcentajes más comunes basados en anchos estándar de contenedores padre.
| Ancho del padre | 10% | 25% | 33.33% (Un tercio) | 50% | 75% |
| 800px | 80px | 200px | ~266px | 400px | 600px |
| 1000px | 100px | 250px | ~333px | 500px | 750px |
| 1200px | 120px | 300px | 400px | 600px | 900px |
| 1440px | 144px | 360px | 480px | 720px | 1080px |
Convertir porcentajes a píxeles es en realidad solo un ejercicio de identificar tu contenedor padre. Una vez que sabes qué tan grande es el «marco de fotos», definir el tamaño del contenido en su interior se vuelve pan comido.
Y si alguna vez necesitas hacer exactamente lo contrario (averiguar el porcentaje a partir de un valor en píxeles exacto), puedes ahorrarte completamente los cálculos y usar un rápido conversor de píxeles a porcentaje.