object-fity object-positionson mis dos propiedades CSS favoritas últimamente. Dan a los desarrolladores el control sobre el contenido dentro de un imgo videosimilar a la forma en que podemos manipular el contenido de un backgroundcon background-positiony 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-fitpodemos decirle al contenido que llene ese cuadro de varias maneras, como “¡preservar esa relación de aspecto!” O “estirar y ocupar tanto espacio como sea posible”.
Aquí hay un ejemplo:
Esta imagen es de 400px x 260px. Si damos estilo a esa imagen así …
img {
width: 200px;
height: 300px;
}… luego terminamos con una distorsión incómoda porque esa imagen se está comprimiendo para que se ajuste a ese contenedor:
El contenido de nuestro imgocupará todo el espacio disponible dentro de su nueva caja que creamos cuando cambiamos su altura y ancho, destruyendo así su relación de aspecto original.
Para preservar la relación de aspecto de la imagen y al mismo tiempo llenar el espacio, podemos usar object-fit:
.cover {
object-fit: cover;
}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! Esto podría no parecer un desarrollo particularmente interesante a esta escala, pero una vez que pasamos al diseño de interfaces más realistas, el poder de se object-fitrevela.
Tomemos otro ejemplo:
Aquí tenemos dos imágenes y queremos que llenen el ancho del 50% de la ventana del navegador (para que se asienten una al lado de la otra) y el 100% de la altura. Esto lo podemos hacer con la ayuda de 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 que puede causar todo tipo de rarezas. En cambio, queremos preservar su relación de aspecto al igual que en la demostración anterior y podemos usar exactamente el mismo método para hacerlo. object-fit: cover¡al rescate!
Intente cambiar el tamaño del navegador nuevamente. No hay rareza de relación de aspecto, ¿verdad? Esto también es extraordinariamente útil si tenemos imágenes que tienen diferentes dimensiones porque serán recortadas efectivamente por su cuadro delimitador.
coveres solo uno de los muchos valores object-fit, sobre los cuales puede leer más en la entrada Almanaque , pero hasta ahora es el único valor que he encontrado que es el más útil en el desarrollo diario de la interfaz.
# Vamos a pasar a mi próxima 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 object-positionque funcione correctamente y también debemos configurarlo object-fitpara noneque la imagen se pueda empujar 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-fituna imagen es fill, incluso si no lo declara.
Hablando de los valores predeterminados, object-positioncentra 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í:
Incluso podemos empujar la imagen dentro de su cuadro de contenido para que podamos revelar lo background-colorque configuramos anteriormente.
¿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 captara la atención del lector. No necesitábamos cargar una nueva imagen, por lo que no necesitábamos el <picture>elemento en este caso, todo lo que queríamos era mover la imagen un poco más.
Además de mover el foco de una imagen, no estoy seguro de para qué otra cosa podría ser útil esta propiedad en un sentido práctico. Pero he estado jugando object-positionpara mostrar cómo puede ocultar partes de una imagen y luego revelar partes de ella al hacer clic, como en esta demostración:
No he experimentado con cómo o por qué podrías usar esto para <video>elementos. ¿Video de pantalla completa que llega a todos los bordes, tal vez? Hay mucho más para aprender y explorar cuando se trata de estas propiedades.