Introducción

En WordPress es habitual que las imágenes insertadas en bloques o plantillas se muestren con dimensiones que no coinciden con sus tamaños reales. Esto provoca que imágenes pequeñas aparezcan estiradas o pixeladas cuando se fuerzan a rellenar contenedores más grandes. Aquí tienes un tutorial completo con explicaciones, limitaciones y varias soluciones (CSS, JavaScript y ajustes en WordPress) para evitar que imágenes pequeñas se estiren, usando object-fit cuando conviene y combinándolo con max-width y otras técnicas.

¿Por qué se estiran las imágenes pequeñas?

• Si en CSS o en el HTML pones width: 100% o dimensiones fijas, el navegador escalará la imagen hasta llenar el contenedor, aunque eso suponga ampliarla y perder calidad.
• object-fit controla cómo se escala una imagen para ajustarse a su caja, pero si la caja es mayor que la imagen original, object-fit: contain o cover pueden ampliar la imagen para ajustarla, lo que produce el estiramiento.
• WordPress puede generar tamaños que obliguen a escalar o recortar si no se gestionan correctamente las imágenes o si se fuerza un tamaño mayor al original.

Solución CSS básica (sin upscaling)

Si quieres que las imágenes nunca se amplíen por encima de su tamaño natural y al mismo tiempo no desborden su contenedor, la regla CSS mínima recomendable es:

img {
  display: block        / evita espacios blancos abajo en algunos contextos /
  max-width: 100%       / no saldrá del contenedor /
  width: auto           / mantiene su tamaño natural solo reducirá si cabe demasiado /
  height: auto          / conserva la proporción /
}

Con esto la imagen reducirá su tamaño si es más ancha que el contenedor, pero no se ampliará si es más pequeña.

Limitaciones de la solución CSS básica

• No sirve si quieres que la imagen rellene visualmente una caja fija (por ejemplo, tarjetas con imagen de fondo). En ese caso a menudo se usan anchura y altura fijas y object-fit, lo que puede provocar upscaling.
• Si necesitas siempre una caja uniforme (mismo alto) para el diseño, habrá que decidir entre recortar (cover), ajustar sin recortar (contain) o detectar tamaños reales y adaptar el comportamiento con JS o con imágenes de mayor resolución.

Uso de object-fit cuando quieres cajas uniformes

Si tu diseño pide una caja rectangular fija para la imagen (por ejemplo thumbnails o hero boxes) y quieres que la imagen se centre sin deformarse, object-fit es útil:

.card__media img {
  width: 100%
  height: 200px         / altura fija de la caja /
  object-fit: cover     / recorta para cubrir la caja /
  object-position: center
  display: block
}

Pero atención: object-fit escalará la imagen hacia arriba si su tamaño natural es menor que la caja. Para evitar ese upscaling hay varias alternativas que se muestran más abajo.

Evitar upscaling: CSS detección limitada

CSS puro no puede conocer la anchura natural de una imagen (naturalWidth) para aplicar reglas condicionales. Por tanto se requieren dos caminos:

• Soluciones con JavaScript que añaden clases según las dimensiones reales de la imagen.
• Ajustes en el servidor / WordPress para no generar o usar versiones que obliguen a ampliar las imágenes.

Solución JavaScript: aplicar clases según tamaño real

Patrón: medir naturalWidth de la imagen y la anchura del contenedor. Si la imagen es menor que el contenedor, no la escales si es mayor, la ajustas para que encaje.

document.addEventListener(DOMContentLoaded, function () {
  document.querySelectorAll(.media-box img).forEach(function(img){
    function update() {
      var containerWidth = img.parentElement.clientWidth
      if (!img.naturalWidth) return
      if (img.naturalWidth lt containerWidth) {
        img.classList.add(no-upscale)   // mantiene tamaño natural, centrado
        img.classList.remove(fit)
      } else {
        img.classList.add(fit)          // escala para encajar
        img.classList.remove(no-upscale)
      }
    }
    if (img.complete) update()
    else img.addEventListener(load, update)
    window.addEventListener(resize, update)
  })
})

CSS asociado:

.media-box { position: relative text-align: center }
.media-box img { display: inline-block max-width: 100% height: auto }
.media-box img.fit { width: 100% height: auto }      / la imagen ocupa la caja pero sin deformar /
.media-box img.no-upscale { width: auto height: auto } / mantiene tamaño natural, centrado /

Evitar upscaling al generar imágenes en WordPress

Si el problema es que WordPress genera versiones de tamaño mayor y las usa, puedes evitar que la generación de intermedias escale hacia arriba usando un filtro en functions.php. Esto evita crear versiones ampliadas de imágenes pequeñas.

// Evitar upscaling al generar tamaños intermedios
add_filter(image_resize_dimensions, no_upscale_image_resize, 10, 6)
function no_upscale_image_resize(payload, orig_w, orig_h, dest_w, dest_h, crop) {
  // Si la imagen original es más pequeña que el destino, no redimensionar
  if (orig_w lt= dest_w  orig_h lt= dest_h) {
    return false // indica a WP que no cree una versión escalada
  }
  return payload // comportamiento por defecto
}

Tras añadir este código debes regenerar miniaturas para que tome efecto en las imágenes ya subidas.

Regenerar miniaturas

Si usas WP-CLI:

wp media regenerate --yes

O usa un plugin como Regenerate Thumbnails desde el panel.

Uso de srcset y sizes: la solución más robusta

WordPress ya genera srcset automáticamente para la mayoría de temas. Asegúrate de:

• Tener atributos width y height reales en la etiqueta img (evita CLS y ayuda al navegador).
• Confiar en srcset/sizes para que el navegador elija la mejor resolución según el dispositivo y la caja disponible.

Si el navegador recibe una imagen demasiado pequeña por falta de srcset o por selección incorrecta, es más probable que se vea pixelada al escalarla. Por tanto, ofrecer múltiples resoluciones es clave.

Alternativa: usar un elemento con background-image

Si lo que deseas es una presentación uniforme (mismo alto y ancho) pero sin riesgo de upscaling visual o con control sobre el comportamiento, usar un contenedor con fondo puede ser útil:

.card__thumb {
  width: 100%
  height: 220px
  background-repeat: no-repeat
  background-position: center center
  background-size: contain / o cover según el efecto deseado /
}

HTML (ejemplo):

Con background-size: contain la imagen mantendrá sus proporciones y se centrará sin embargo, si la caja es mayor se puede ver espacio vacío alrededor. El background no se informará como imagen en el flujo DOM, por lo que recuerda mantener accesibilidad y proporcionar una versión img si es necesario para lectores de pantalla o para SEO.

Gutenberg / Bloques de WordPress: selectores prácticos

Si trabajas con el editor de bloques, añade reglas específicas para los selectores que Gutenberg usa:

/ Imágenes dentro del bloque imagen /
.wp-block-image img {
  display: block
  max-width: 100%
  height: auto
  width: auto
}

/ Si tienes cajas con altura fija en un bloque personalizado /
.wp-block-your-plugin .image-box img {
  width: 100%
  height: 180px
  object-fit: cover / o contain /
}

Buenas prácticas y checklist

1. Empieza por la base: usa max-width:100% height:auto width:auto para las imágenes en el contenido para evitar que pequeñas se agranden.
2. Si necesitas cajas uniformes: usa object-fit en combinación con detección JS para evitar upscaling, o usa imágenes de mayor resolución/recursos adecuados.
3. En functions.php: evita generar versiones ampliadas con el filtro image_resize_dimensions si no quieres upscaling automático al crear intermedios.
4. Regenera miniaturas tras cambiar tamaños o filtros en WordPress.
5. Usa srcset y sizes para servir la resolución adecuada y reducir la necesidad de escalar en el cliente.
6. Mantén los atributos width y height en las imágenes para preservar el ratio y evitar saltos de diseño.
7. Prueba en dispositivos reales y en navegadores que no soportan object-fit (proporciona fallback con background o con JS polyfill si es crítico).

Polyfills y compatibilidad

object-fit está soportado en la mayoría de navegadores modernos, pero si tienes que cubrir navegadores antiguos (p.ej. IE11) considera usar un polyfill o la técnica con background-image. Para la mayoría de proyectos actuales, object-fit es seguro.

Resumen práctico y flujo recomendado

1. Aplicar CSS global básico: img { max-width:100% height:auto width:auto }.
2. Para bloques/elementos con caja fija, usar object-fit y, si hay riesgo de upscaling, añadir la detección JavaScript que marque .no-upscale o .fit.
3. En functions.php evitar generar tamaños mayores que los originales si no quieres upscaling.
4. Regenerar miniaturas y comprobar resultado en distintas resoluciones con las herramientas de desarrollador y en dispositivos reales.

Notas finales

Combinar las reglas CSS correctas con una buena configuración de tamaños en WordPress y, cuando sea necesario, una pequeña capa de JavaScript para detectar tamaños reales, es la forma más fiable de evitar que imágenes pequeñas se estiren. Cada sitio es distinto: elige la combinación que mejor se adapte a tu plantilla y flujo de trabajo (regeneración de imágenes, uso de srcset, y control en el servidor suelen ser soluciones clave).