Diseño · Guía práctica
Rellenar una miniatura con cover puede recortar el cartel aunque no lo deforme
Contain y cover conservan proporciones, pero resuelven de manera distinta una caja con otra forma.
MDN distingue los valores de object-fit para ajustar una imagen a su caja. Contain conserva el contenido completo dentro del espacio disponible; cover mantiene la proporción mientras rellena la caja y puede recortar el contenido cuando sus proporciones no coinciden. Esa decisión importa si una miniatura contiene texto cerca del borde.
Ejemplo propio: un cartel ficticio mide seiscientos por novecientos píxeles y se presenta en una caja de trescientos por trescientos. Para contenerlo completo sin deformar, el factor es un tercio: se verá con doscientos de ancho y trescientos de alto. La caja puede tener espacio sin imagen a los lados.
Para cubrir esa misma caja, el factor es un medio: el contenido pasa a trescientos por cuatrocientos cincuenta. Sobran ciento cincuenta píxeles en la dimensión vertical y una parte quedará fuera del área visible según el posicionamiento. No se han creado píxeles de información adicional; cambia el modo de presentar la imagen.
La ficha de diseño debe conservar proporción original, medidas de la caja y qué contenido no puede perderse. Si la fecha del evento está en un borde, llenar todas las miniaturas con cover puede ocultarla. El ejemplo es geométrico y no anuncia un cartel real ni garantiza el comportamiento de una plantilla que no hemos probado.
Prueba el resultado con el material final y revisa también el texto alternativo y la información disponible fuera de la imagen. Evitar un recorte no resuelve por sí solo la accesibilidad ni la legibilidad. La elección útil depende de si importa mostrar la pieza completa o priorizar un encuadre dentro de una composición.
Comprobación práctica
- Anota las dos proporciones
- Calcula cómo cabe con contain
- Revisa qué recorta cover
- Conserva los datos esenciales