Cómo funciona object-fit: cover
Hero de ancho completo, alto fijo de 510px. Guía para diseñadores.
cover escala la imagen para llenar la caja manteniendo su proporción, y recorta lo que sobra. Nunca deforma ni deja franjas vacías: siempre recorta. El recorte cae en el eje donde la imagen sobra respecto a la caja.
1440 px
El recuadro = el hero real (alto 510px). La imagen detrás es tu archivo exportado (1600×900).
El problema del foco en los costados
Con object-position por defecto (center), cuando la caja queda más angosta/alta que la imagen se recortan los bordes izquierdo y derecho. Si tu sujeto importante está a un costado, desaparece en pantallas angostas. Soluciones: mantén el sujeto en el centro (zona segura), mueve el foco con object-position, o entrega recortes distintos por breakpoint con <picture>.
📐 Tamaño para exportar
Exporta a
—
Relación de aspecto
—
Zona segura
centro ~60%
Reglas rápidas
- Alto siempre 510px; el ancho del hero cambia con la pantalla, así que la proporción de la caja no es fija.
- Exporta la imagen tan ancha como la pantalla más grande que soportes, y al doble para retina.
- Deja lo importante en el 60% central (zona segura): es lo único que sobrevive en todos los anchos.