Cinco formas de recortar imágenes en HTML y CSS

Conclusiones clave

object-fit: cover recorta un img dentro de una caja fija, preservando la semántica intrínseca.
overflow: hidden recorta una imagen posicionada y funciona bien para desplazamientos focales personalizados.
background-size: cover es adecuado para imágenes decorativas que no necesitan texto alternativo.

Recortar en HTML y CSS significa restringir lo que ven los usuarios, no reescribir la imagen fuente. Cada técnica ofrece un equilibrio distinto entre semántica, adaptabilidad, flexibilidad de forma y trabajo del navegador.

Un recorte puede ser una vista o un archivo nuevo

Un recorte en el navegador suele crear una ventana de visualización. La imagen de origen se decodifica, se organiza y se pinta, pero parte de ella queda oculta por una caja, una máscara o un límite de recorte. Los píxeles ocultos siguen perteneciendo al recurso. Esto resulta útil cuando una misma imagen necesita varias presentaciones temporales, como una tarjeta cuadrada, un banner ancho y un avatar circular.

Un recorte generado es una imagen independiente cuyas dimensiones en píxeles coinciden con la salida prevista. Puede reducir el tamaño de transferencia, evitar que se descarguen regiones ocultas y ofrecer dimensiones estables a feeds, plantillas de email, descargas u otros sistemas. Elige entre estos modelos antes de elegir una técnica de CSS, porque resultados visualmente idénticos pueden tener propiedades de seguridad, rendimiento y reutilización muy distintas.

Recorte de presentación

Usa CSS cuando la misma fuente necesite una vista reversible que pueda cambiar con el diseño.

Derivado persistente

Genera un archivo cuando sus bytes, dimensiones, composición o reutilización posterior formen parte del contrato del producto.

Usa object-fit para imágenes semánticas

Para una imagen con significado, un elemento img suele ofrecer el marcado más limpio porque conserva el texto alternativo, las dimensiones intrínsecas, el comportamiento de carga y la selección de fuente responsiva. Dale a su contenedor un ancho y alto definidos o una relación de aspecto, haz que la imagen llene esa caja y usa object-fit: cover. El navegador escala la imagen sin distorsión hasta cubrir la caja y luego oculta el excedente a lo largo de un eje.

object-position controla qué parte sobrevive a ese recorte. El valor predeterminado center solo es adecuado cuando los sujetos están siempre centrados. Porcentajes como 70 % 30 % pueden conservar una cara o un producto descentrados, mientras que las longitudes pueden expresar un desplazamiento fijo en un componente controlado. Prueba la posición en cada relación de aspecto de destino, porque un ajuste focal que funciona en una tarjeta ancha puede cortar el mismo sujeto en una tarjeta alta.

Recortar una imagen semántica dentro de un marco fijo

<figure class="profile-card">
  <img
    class="profile-card__photo"
    src="ada.webp"
    alt="Ada Lovelace seated beside a writing desk"
    width="800"
    height="1000"
  />
  <figcaption>Ada Lovelace</figcaption>
</figure>

<style>
  .profile-card__photo {
    inline-size: 12rem;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 50%;
  }
</style>

cover

Llena el destino y recorta el excedente conservando la relación de aspecto de la fuente.

contain

Muestra la imagen completa pero puede dejar espacio sin usar, por lo que no es un recorte.

object-position

Mueve la fuente dentro de su caja de contenido y determina qué borde pierde píxeles.

aspect-ratio

Define la forma preferida de la caja; object-fit determina cómo la ocupa la imagen.

Crea desplazamientos controlados con un contenedor con overflow

Un contenedor con desbordamiento oculto ofrece un control más directo cuando object-position no es lo bastante expresivo. Coloca la imagen dentro de un elemento con posición relativa, dimensiones fijas y overflow: hidden, y luego mueve o escala la imagen dentro de él. Este patrón admite desplazamientos definidos por el editor, controles de zoom y regiones focales que no coinciden con un simple gravity top, center o bottom.

Mantén el modelo de coordenadas independiente del viewport actual. Las traslaciones en píxeles fijos suelen fallar cuando el contenedor se vuelve responsivo, mientras que los desplazamientos normalizados se pueden recalcular para cada tamaño. Ten en cuenta también las transformaciones al medir la imagen: una imagen trasladada o escalada puede verse correcta aunque su caja de diseño sin transformar esté en otro lugar. Reserva el espacio de destino de antemano para que la carga no desplace el contenido circundante.

Reserva los fondos para las imágenes decorativas

Un fondo CSS con background-size: cover se comporta de forma muy similar a object-fit: cover, pero pertenece a la decoración del elemento y no al contenido del documento. Eso lo hace apropiado para texturas, imágenes ornamentales de portada o ilustraciones cuyo significado ya transmite el texto cercano. background-position ofrece control focal, y las media queries independientes pueden seleccionar diferentes recursos o posiciones.

No conviertas una fotografía informativa en un fondo solo para simplificar el recorte. Las imágenes de fondo no aceptan texto alternativo y pueden desaparecer en escenarios de alto contraste, impresión o hojas de estilo definidas por el usuario. Si la imagen comunica una persona, un producto, un diagrama o un evento, conserva un elemento img o picture y usa CSS para su presentación. La decisión semántica debería preceder a la decisión de estilo.

Separa la geometría de la caja de la geometría de recorte

La propiedad aspect-ratio crea un rectángulo responsivo sin el antiguo cálculo de relleno en porcentaje. Por sí sola no recorta. El elemento sigue necesitando object-fit, overflow u otra regla de recorte para decidir qué ocurre cuando las relaciones de origen y destino difieren. Las técnicas antiguas basadas en relleno pueden seguir presentes en código heredado, pero combinarlas con una altura explícita suele generar un comportamiento de tamaño confuso.

clip-path crea círculos, polígonos y otras vistas no rectangulares. Cambia el contorno pintado sin generar un archivo de imagen con una nueva forma, y el recurso rectangular original sigue transfiriéndose y decodificándose igual. Deja suficiente espacio para los indicadores de foco y los pies de imagen, y prueba la forma en tamaños pequeños. Un hexágono decorativo que se ve llamativo en tamaño de escritorio puede ocultar un rostro o volverse irreconocible en una lista compacta.

Aplica dirección de arte a las composiciones en lugar de estirar un solo recorte

La selección responsiva de resolución y la dirección de arte resuelven problemas distintos. Un srcset normalmente ofrece la misma composición en varias densidades de píxeles o anchos. En cambio, un elemento picture puede seleccionar archivos de origen distintos según las condiciones del medio, lo que permite un retrato cercano en un teléfono y una escena contextual más amplia en un escritorio. El elemento img hijo sigue proporcionando el texto alternativo compartido y la imagen alternativa.

La dirección de arte es preferible cuando ningún recorte único preserva la historia prevista en todas las relaciones de aspecto. Guarda la decisión editorial como metadatos del recurso en lugar de ocultarla en un desplazamiento CSS específico de un componente. Eso hace que la decisión sea reutilizable en otra interfaz y revisable cuando cambian los diseños. Conserva el original junto con las variantes aprobadas para que una futura ubicación no se vea obligada a recortar un archivo ya recortado.

Genera derivados cuando el recorte debe persistir

Para ubicaciones estables, crea un derivado del lado del servidor con ancho, alto, formato de salida y coordenadas de recorte o intención focal explícitos. Un recorte posicional es reproducible; un recorte guiado por prominencia visual o entropía es solo un candidato. Conserva el original, registra la decisión de recorte y revisa las composiciones importantes antes de publicarlas en feeds, descargas y ubicaciones de tamaño fijo.

Un rectángulo de recorte explícito puede describir en cambio la región exacta de la fuente mediante las coordenadas de sus esquinas, en píxeles o porcentajes. Verifica cómo combina el procesador elegido un rectángulo explícito con otros parámetros de tamaño, porque algunos tratan las coordenadas como autoritativas e ignoran un ancho y alto solicitados por separado. Si también se requiere un tamaño final específico, usa un paso de redimensionamiento posterior. Guarda las salidas en rutas versionadas o derivadas del contenido para que una política de recorte modificada no deje archivos obsoletos bajo una clave de caché antigua.

Rellenar un cuadro conocido

Usa un redimensionamiento de relleno y recorte con ancho, alto y un ajuste de gravity o focal adecuados cuando el contrato de ubicación sea una relación exacta.

Respetar un rectángulo aprobado

Usa coordenadas de recorte explícitas cuando un editor o una aplicación ya haya seleccionado la región de la fuente.

Conservar el archivo maestro

Conserva la fuente sin recortar para poder generar nuevas relaciones de aspecto y composiciones corregidas sin pérdida acumulada de calidad.

Prueba el recorte como contenido, no solo como CSS

Crea un conjunto de datos de prueba que contenga panorámicas, fotos verticales de teléfono, imágenes diminutas, archivos transparentes, sujetos descentrados, texto cerca de los bordes y fuentes con orientación inusual. Inspecciona los puntos de quiebre responsivos más pequeños y más grandes, el zoom del navegador, las pantallas de alta densidad y la carga lenta. Las verificaciones automatizadas pueden confirmar las dimensiones de salida y la estabilidad del diseño, pero aun así se necesita una revisión visual para detectar rostros cortados, etiquetas faltantes o composiciones engañosas.

Recortar no repara la accesibilidad ni elimina material sensible. El texto alternativo debería describir lo que sigue siendo relevante en la vista mostrada, mientras que las imágenes decorativas deberían tener un texto alternativo vacío apropiado o seguir siendo decoración CSS. Nunca uses overflow, object-fit o clip-path para ocultar información personal, bordes de documentos o personas cuya privacidad deba protegerse, porque los usuarios aún pueden recuperar la fuente completa. Genera un derivado saneado cuando realmente se deban eliminar los píxeles.

Detalles técnicos que conviene conocer

object-fit cambia la forma en que los píxeles de la imagen se asignan al cuadro de contenido de un elemento; no crea un archivo de imagen más pequeño ni reduce la cantidad de bytes de origen transferidos.
clip-path y overflow hidden afectan el pintado, mientras que la imagen original permanece presente y aún puede influir en la carga, el uso de memoria, la accesibilidad y el dimensionamiento intrínseco.
La propiedad object-position puede usar porcentajes o longitudes para conservar una región focal, pero una sola posición focal puede no funcionar tanto para relaciones de destino horizontales como verticales.
La propiedad aspect-ratio crea una relación de caja preferida, pero no recorta por sí sola; overflow y object-fit determinan qué ocurre cuando la relación de origen es diferente.
Una imagen transformada o recortada aún puede exponer el original completo al descargarse, por lo que el recorte con CSS nunca debe usarse para eliminar contenido sensible en los bordes.
Los diseños responsivos a menudo necesitan un punto focal en lugar de un desplazamiento de píxeles fijo, porque el rectángulo visible cambia a medida que cambia el ancho del contenedor.

Un enfoque práctico

1
Decide si el recorte es decorativo, semántico, descargable o reutilizado posteriormente.
2
Almacena la intención o las coordenadas focales por separado del estado transitorio del componente.
3
Genera derivados revisados para ubicaciones estables y conserva la fuente para futuras variantes.
4
Prueba el enfoque de teclado, el texto alternativo, las dimensiones responsivas y las relaciones de aspecto de fuente inusuales.

Un flujo de trabajo multimedia de cuatro etapas

Límite de la arquitectura

CSS solo recorta la vista renderizada; no crea un derivado más pequeño ni elimina píxeles ocultos del archivo transferido. Usa el procesamiento en el servidor cuando importen los bytes, las dimensiones exportadas o la reutilización posterior.

Preguntas frecuentes

¿object-fit: cover reduce el tamaño de descarga de una imagen?

No. Cambia cómo se pinta la imagen descargada dentro de su caja. Usa un derivado con el tamaño correcto y fuentes de imagen responsivas cuando importe el tamaño de transferencia.

¿Cuándo debería una imagen usar un fondo CSS en lugar de un elemento img?

Usa un fondo cuando la imagen sea decorativa y no aporte información que requiera texto alternativo. Las fotografías, diagramas, productos y retratos con significado deberían seguir siendo normalmente elementos img o picture.

¿Puede un solo valor de object-position funcionar para toda proporción responsiva?

A veces, pero no está garantizado. Una posición focal normalizada es reutilizable, aunque ventanas horizontales y verticales muy diferentes aún pueden requerir recortes con dirección artística independientes.

¿Es clip-path seguro para eliminar partes confidenciales de una imagen?

No. clip-path solo cambia la región de pintado visible. La fuente completa aún puede descargarse, decodificarse o abrirse por separado.

¿Cómo se puede evitar el desplazamiento de diseño alrededor de una imagen recortada?

Reserva la geometría de destino antes de que la imagen se cargue. Define atributos útiles de width y height donde corresponda y establece la relación de aspecto responsiva del componente en CSS.