Colocar una imagen como fondo utilizando la propiedad css: Object-fit

En ocasiones tenemos la necesidad de colocar imágenes como fondo dentro de algunos elementos por lo que recurrimos comúnmente a la propiedad background-image 

.elemento{
background-image: url("imagen.jpg");
}

Pero el día de hoy les traigo otra forma de hacerlo utilizando la propiedad css object-fit

Propiedad: object-fit
Está propiedad especifica la forma en la que el contenido de un elemento remplazado debería ser ajustado en la caja establecida en base a la altura y ancho dado.

Un elemento remplazado en css es un elemento cuya representación esta fuera del alcance de CSS, por ejemplo:<img>, <object>, <video>, etc.

Posible valores: fill | contain | cover | none | scale-down

fill
El contenido reemplazado se redimensiona para llenar la caja contenido del elemento: el tamaño del objeto se ajusta utilizado anchura y la altura del elemento, puede perder la relación de aspecto.

contain
El contenido reemplazado se redimensionada manteniendo su relación de aspecto, una vez que se adapta dentro de la caja contenedora su tamaño se resuelve como una restricción con el ancho y la altura de la caja.

cover
El contenido reemplazado se redimensiona para cubrir en su totalidad el ancho y alto de la caja, el elemento remplazado mantiene su relación de aspecto.

none
El contenido reemplazado no cambia de tamaño para caber dentro de la caja, el tamaño se determina utilizando el algoritmo predeterminado de tamaño sin cantidad especificada.

scale-down
El contenido se redimensiona comparando la diferencia entre none y contain, lo que daría lugar a un tamaño más pequeño del objeto concreto.

Propiedad: object-position

La propiedad object-position se utiliza en conjunto con object-fit y determina la alineación del elemento reemplazado dentro de la caja contenedora. Su valor inicial es 50% 50% por las coordenadas X/Y respectivamente.

Acá abajo te dejo un ejemplo de su funcionamiento

El único inconveniente es que tanto Internet explorer como Edge no soportan el uso de esta propiedad, aquí puedes echar un vistazo: http://caniuse.com/#feat=object-fit

Deja un comentario