object-fit y object-position son mis dos propiedades CSS favoritas últimamente. Dan a los desarrolladores control sobre el contenido dentro de un img o un video similar a la forma en que podemos manipular el contenido de un background con background-position y background-size.
Primero, profundicemos object-fit.
Esta propiedad define cómo un elemento, como un img, responde al ancho y alto de su cuadro de contenido. Con object-fit podemos decirle al contenido que llene ese cuadro de varias maneras, como “¡conserve esa relación de aspecto!” o “¡estírate y ocupa el mayor espacio posible!”
Aquí hay un ejemplo:
Esta imagen es 400px x 260px. Si diseñamos esa imagen así…
img {
width: 200px;
height: 300px;
}…entonces terminamos con una distorsión incómoda porque esa imagen está siendo comprimida para encajar en ese contenedor:
Vea el Pen 1b15cf30a6226d9f419b4f765458a059 de Robin Rendle (@robinrendle) en CodePen.
El contenido de nuestro img ocupará todo el espacio disponible dentro de su nueva caja que creamos cuando cambiamos su alto y ancho, destruyendo así su relación de aspecto original.
Para preservar la relación de aspecto de la imagen y al mismo tiempo rellenar el espacio, podemos usar object-fit:
.cover {
object-fit: cover;
}Vea el Pen 7080df9cb7158c0860b8a66db9667a7d de Robin Rendle (@robinrendle) en CodePen.
La imagen de la izquierda es nuestra original y la imagen de la derecha ha cortado los lados de la imagen, ¡ahora preservando nuestra relación de aspecto! Puede que esto no parezca un desarrollo particularmente interesante a esta escala, pero una vez que pasamos a diseñar interfaces más realistas, entonces el poder de object-fit se revela.
Tomemos otro ejemplo:
Vea el Pen WrBzey de Programar Plus(@css-tricks) en CodePen.
Aquí tenemos dos imágenes y queremos que ocupen el 50 % del ancho de la ventana del navegador (para que queden una al lado de la otra) y el 100 % de la altura. Esto lo podemos hacer con la ayuda de las unidades de ventana gráfica:
img {
height: 100vh;
width: 50vw;
}El problema es que cuando cambiamos el tamaño del navegador, cambiamos la relación de aspecto de las imágenes, lo que puede causar todo tipo de rarezas. En cambio, queremos conservar su relación de aspecto como en la demostración anterior y podemos usar exactamente el mismo método para hacerlo. object-fit: cover ¡al rescate!
Vea el Pen YwbeoG de Programar Plus(@css-tricks) en CodePen.
Intente cambiar el tamaño del navegador de nuevo. No hay rarezas en la relación de aspecto, ¿verdad? Esto también es extraordinariamente útil si tenemos imágenes que tienen diferentes dimensiones porque serán efectivamente recortadas por su cuadro delimitador.
cover es sólo uno de los muchos valores para object-fit, sobre el cual puede leer más en la entrada de Almanac, pero hasta ahora es el único valor que he encontrado que es el más útil en el desarrollo diario de la interfaz.
Pasemos a mi siguiente cosa favorita: object-position.
Configuraremos las cosas usando la misma imagen que antes y usando estos estilos:
img {
background: yellow;
height: 180px;
object-fit: none;
}Dos cosas a tener en cuenta aquí: necesitamos declarar las dimensiones de nuestra imagen para que object-position para que funcione correctamente y también tenemos que configurar object-fit a none para que la imagen se pueda desplazar en lugar de llenar todo el cuadro, como lo haría de forma predeterminada. Esto tiene un poco más de sentido cuando ve que el valor predeterminado para object-fit en una imagen es fill, incluso si no lo declaras.
Hablando de valores predeterminados, object-position centra todos los objetos horizontal y verticalmente sin un valor:
img {
background: yellow;
height: 180px;
object-fit: none;
object-position: 50% 50%; /* even if we dont declare this the image will still be centered */
}El primer valor mueve la imagen hacia la izquierda o hacia la derecha y el segundo la mueve hacia arriba o hacia abajo. Podemos experimentar con esos valores aquí:
Vea la posición del objeto Pluma por Robin Rendle (@robinrendle) en CodePen.
Incluso podemos empujar la imagen dentro de su cuadro de contenido para que podamos revelar el background-color que pusimos antes.
Pero, ¿cómo es esto útil? ¡Buena pregunta! Bueno, en un proyecto reciente descubrí que era necesario mover una sección particular de una imagen hacia el centro para que llamara la atención del lector. No necesitábamos cargar una nueva imagen, por lo que no necesitábamos la <picture> elemento en este caso, todo lo que queríamos hacer era mover la imagen un poco.
Además de mover el foco de una imagen, no estoy seguro de para qué más podría ser útil esta propiedad en un sentido práctico. Pero he estado jugando con object-position para mostrar cómo puede ocultar partes de una imagen y luego revelar partes de ella al hacer clic, como en esta demostración:
Vea el sprite Pen SVG con la posición del objeto de Robin Rendle (@robinrendle) en CodePen.
No he experimentado con cómo o por qué podrías usar esto para <video> elementos. ¿Video de pantalla completa que golpea todos los bordes, tal vez? Hay mucho más para aprender y explorar cuando se trata de estas propiedades.
¿Cuál es el apoyo?
En términos generales, ¡bastante bien!
object-fit es compatible con todo excepto IE/Edge. Mientras que, object-position es compatible con todo excepto Safari e IE/Edge.