Object-Fit y Object-Position
Estas propiedades tienen la función de regular el comportamiento de las imágenes para que estas se adecuen lo mejor posible a la página web, conservando la mayor calidad posible. Por defecto, las imágenes en HTML modifican sus dimensiones para adaptarse al contenedor en el que se encuentran y ocupar el 100% de este, razón por la cual es muy probable que la calidad de la imagen se vea afectada, tal como se puede ver en el siguiente ejemplo, el cual muestra una imagen que se ingresó en un contenedor con dimensiones diferentes a las de la imagen original:
Código
Resultado
Estos problemas de deformación y pérdida de calidad son los que solucionan object-fit y object-position.
Object-Fit
Esta propiedad define la forma en la que el navegador trabaja las dimensiones de las imágenes. Esta propiedad cuenta con múltiples valores, de los cuales cada uno define una forma de ajustar la imagen a la página de diferente manera; estos valores son:
Contain
-
Este valor evita que la escala de la imagen se modifique para ajustarse a su contenedor; en otras palabras, mantiene la imagen con su relación alto-ancho original a la vez que la centra dentro de su contenedor:
Código
Resultado
Cover
-
Este valor ajusta la imagen a su contenedor; sin embargo, en vez de estirarla alterando sus dimensiones, lo que hace es un "acercamiento" a esta, a la vez que recorta los bordes para adecuarla a las dimensiones del contenedor. En otras palabras, este valor define que la imagen cubra todo el contenedor sin deformarse:
Código
Resultado
None
-
Este valor define que se inserte la imagen en el contenedor con sus dimensiones originales. Literalmente, indica al navegador que no realice ningún tipo de cambio sobre la imagen o sus dimensiones, sin importar si esta es muy grande o muy pequeña para su contenedor, razón por la cual es el valor con menos uso.
Scale-Down
-
Este valor tiene la capacidad de aplicar cualquiera de los otros valores, siempre seleccionando aquel que resulte en la imagen con las menores dimensiones. Por lo tanto, según las dimensiones de la página y de la imagen, puede emplear `none` o `contain` basándose en cuál integra la imagen más pequeña.
Object-Position
Esta propiedad define la forma en la que se posiciona la imagen en su contenedor, es decir, si esta estará centrada o alineada hacia un borde u otro. Esta propiedad cuenta con varios valores:
-
Left: Alinea la imagen al borde izquierdo.
-
Right: Alinea la imagen al borde derecho.
-
Top: Alinea la imagen al borde superior.
-
Bottom: Alinea la imagen al borde inferior.
Esta propiedad también acepta valores de medidas (px, %, etc.), los cuales se emplean para desplazar la imagen en los ejes X e Y.
Código
Resultado
Nota: Respondiendo a tu duda, efectivamente puedes pasar dos valores (ej. object-position: 20px 50px;). El primero corresponde al eje X (horizontal) y el segundo al eje Y (vertical).