Tutorial WordPress: Cómo limitar el ancho de las imágenes en entradas sin romper el diseño

Introducción — el problema y por qué ocurre

En entradas de WordPress es común insertar imágenes de distintos tamaños. Si no se controla su anchura, las imágenes pueden salirse del contenedor, romper columnas, desalinear texto o forzar scroll horizontal en móvil. El objetivo de este tutorial es mostrar soluciones seguras y compatibles con WordPress para limitar el ancho de las imágenes sin “romper” el diseño ni perder la naturaleza responsiva que aportan el atributo srcset y los estilos del tema.

Diagnóstico rápido antes de tocar código

Inspecciona con las herramientas del navegador (F12) para ver el selector del contenedor que envuelve la entrada (ej. .entry-content, .post-content, .content-area).
Comprueba si el tema aplica reglas globales a img o a clases como .alignwide, .alignfull, .wp-block-image.
Identifica si las imágenes están dentro de un figure o de un bloque de galería a veces las galerías usan estructuras diferentes.
Prueba reducir tamaño de una imagen manualmente (inspector) para ver si el diseño se recupera así confirmas que es un problema de estilos y no de HTML roto.

La regla básica: imágenes responsivas sin romper

La base para que una imagen nunca desborde su contenedor es combinar width y max-width con height:auto. Si quieres que la imagen tenga un máximo absoluto en píxeles pero siga escalando en pantallas pequeñas, usa width:100% junto con max-width. Añádelo preferentemente apuntando al selector del contenido de las entradas.

/ CSS recomendado: limita ancho máximo y preserva responsividad /
.entry-content img,
.single-post .entry-content img {
  display: block         / evita pequeños gaps cuando la imagen es inline /
  width: 100%            / ocupa el ancho del contenedor hasta su límite /
  max-width: 800px       / límite en píxeles que no queremos sobrepasar /
  height: auto           / mantiene la proporción /
  box-sizing: border-box / evita overflow por padding/border /
  margin-left: auto
  margin-right: auto     / centra imágenes si sobran espacios /
}

Por qué funciona

width:100% hace que la imagen se adapte a contenedores pequeños (móviles).
max-width evita que la imagen supere un ancho razonable (p. ej. 800px) en pantallas grandes.
height:auto preserva la proporción y evita distorsión.

Mejorar casos específicos: alineaciones y galerías

Los temas y el editor añaden clases como .alignleft, .alignright, .wp-block-image o .blocks-gallery-image. Para que las reglas anteriores no rompan diseños donde las imágenes deben flotar o ocupar columnas, aplica reglas específicas para esos selectores.

/ Flotadas: limitar su ancho relativo para que el texto fluya /
.entry-content img.alignleft,
.entry-content img.alignright {
  width: auto
  max-width: 45%   / evita que la imagen ocupe toda la columna flotante /
  height: auto
  display: inline-block
}

/ Bloques de imagen de Gutenberg /
.wp-block-image img {
  width: 100%
  max-width: 900px / límite para bloques de imagen /
  height: auto
}

/ Galerías: cada imagen dentro de la galería suele comportarse distinto /
.blocks-gallery-image img {
  width: 100%
  height: auto
  max-width: none / la galería suele controlar la rejilla no forzar aquí /
}

Uso de valores adaptativos con clamp() y min()

Para un control más fluido según viewport puedes usar funciones CSS modernas como clamp() o min(). Ejemplo: que la imagen no sea nunca menor de 240px, ocupe hasta un 60% de la ventana y no exceda 900px.

.entry-content img.responsive-limited {
  width: clamp(240px, 60vw, 900px)
  height: auto
}

Evitar el uso innecesario de !important

Si el tema aplica reglas con mucha especificidad, evita abusar de !important. Primero aumenta la especificidad del selector (ej. .single-post .entry-content img) o coloca la regla al final en el fichero style.css del child theme o en “Apariencia → Personalizar → CSS adicional”. Solo usa !important como último recurso:

/ último recurso /
.entry-content img {
  max-width: 800px !important
}

Solución desde WordPress: content_width y tamaños de imagen

WordPress usa la variable global content_width para determinar tamaños por defecto y generación de thumbnails. Definirla en el tema (o child theme) ayuda a que WordPress y plugins generen imágenes en tamaños razonables.

/ functions.php del tema (o child theme) /
if ( ! isset( content_width ) ) {
  content_width = 800 // en píxeles — coincide con el max-width CSS
}

/ Añadir tamaños personalizados /
add_action( after_setup_theme, function() {
  add_image_size( post-large, 1200 ) // tamaño grande para featured
  add_image_size( post-medium, 800 ) // tamaño usado en el contenido
  // Opcional: hacerlos seleccionables en el editor
  add_filter( image_size_names_choose, function( sizes ) {
    return array_merge( sizes, array(
      post-large  => Post large,
      post-medium => Post medium
    ) )
  } )
} )

Evitar imágenes demasiado grandes generadas por el editor

WordPress genera srcset, pero si subes imágenes monstruosas siempre corres riesgo. Dos recomendaciones:

Almacena imágenes con una anchura máxima razonable (p. ej. 2400 px) desde el origen.
Configura tamaños de imagen y registra un content_width coherente para que WordPress no asigne un tamaño excesivo por defecto.

Ejemplo completo: CSS para limitar imágenes en entradas (best practice)

Este bloque CSS es un ejemplo que puedes pegar en “Apariencia → Personalizar → CSS adicional” o en el style.css de un child theme. Cubre imágenes insertadas, Gutenberg y alineaciones sin romper galerías ni floatings.

/ Base: todas las imágenes en contenido /
.single-post .entry-content img,
.page .entry-content img {
  display: block
  width: 100%
  max-width: 900px    / ajusta a tu diseño /
  height: auto
  margin: 1em auto
  box-sizing: border-box
}

/ Flotadas: limitar a un porcentaje razonable /
.entry-content img.alignleft,
.entry-content img.alignright {
  width: auto
  max-width: 45%
  margin: 0 1em 1em 0
  display: inline-block
}

/ WP Blocks /
.wp-block-image img,
.blocks-gallery-image img {
  width: 100%
  height: auto
  max-width: none / dejar que el bloque controle la rejilla /
}

/ Para pantallas muy pequeñas, reducir el max-width /
@media (max-width: 480px) {
  .entry-content img {
    max-width: 100%
    margin: 0.5em 0
  }
}

Comprobaciones finales y pruebas

Aplica el CSS en el Customizer o en el child theme y recarga la página con cache desactivada (Ctrl F5).
Revisa en varios tamaños de pantalla y en dispositivos reales si es posible.
Inspecciona imágenes que siguen desbordando y anota sus selectores puede que venga de una regla específica del tema y necesites adaptar la especificidad.
Si usas un plugin de cache o optimización de CSS, purga la cache después de los cambios.

Resumen práctico (lista rápida)

Usa .entry-content img { width:100% max-width: Xpx height:auto } como regla base.
Define content_width y tamaños de imagen en functions.php para que WordPress genere recursos adecuados.
Ajusta selectores para floats, bloques de Gutenberg y galerías para no romper su comportamiento.
Evita !important eleva especificidad o coloca la regla al final del CSS.
Prueba en distintas resoluciones y limpia cachés de plugins/servicios CDN.

Recursos útiles

Checklist final antes de publicar

¿Los cambios están en un child theme o en CSS adicional para no perderse con actualizaciones?
¿Has probado en móviles, tablet y escritorio?
¿Has definido content_width si controlas el tema?
¿Has tenido en cuenta galerías y bloques del editor?

SushiHost