CSS Object-Fit y Propiedades de posposición de objetos | Explicado

Además de el estilo de imágenes, videos u otro contenido de este tipo que aparece en las páginas web, designando el ajuste y la posición correctos son altamente cruciales al diseñar la estructura de un sitio web. Se han proporcionado algunas propiedades en CSS que le permiten realizar estas tareas con gran facilidad y simplemente una sola línea de código. Hemos alistado estas propiedades a continuación.

1. Propiedad de ajuste de objetos
2. Propiedad de posposición de objetos

Vamos a sumergirnos en sus profundidades a continuación.

Propiedad de ajuste de objetos

A los fines de especificar cómo se utilizará un video o una imagen en una página web para ajustar su contenedor, se utiliza la propiedad de ajuste de objeto. Esta propiedad básicamente describe cómo actuará un elemento cuando cambia el tamaño del contenedor que lo sostiene.

Sintaxis

Fit de objeto: ninguno | llenar | cubierta | contener | escala hacia abajo | inicial | heredar;

Todos estos parámetros se explican en la tabla a continuación.

Parámetros	Descripción
ninguno	Este valor no cambiar el tamaño del contenido.
llenar	Este es un valor predeterminado que hará que el contenido llene su contenedor estirando o apretando.
cubrir	Se usa para hacer que el contenido llene su contenedor mientras preserva su relación de aspecto.
contener	También se usa para hacer que el contenido llene su contenedor recortando mientras preserva su relación de aspecto.
escala hacia abajo	Este valor hereda las propiedades del valor de ninguno o contiene un valor.
inicial	Este valor establece la propiedad en su valor predeterminado.
heredar	Hereda la propiedad de su elemento predecesor.

Exploremos aún más la propiedad de ajuste de objetos con la ayuda de ejemplos.

Ejemplo

Para comprender mejor los diversos valores de la propiedad de ajuste de objeto, primero incrusionemos una imagen en nuestra página web utilizando HTML.

Html

Aquí hemos agregado una imagen en el atributo SRC de la etiqueta.

Producción

Una imagen ha sido integrada en la página web.

Ahora exploremos diferentes parámetros de la propiedad de ajuste de objeto y veamos qué hacen a la imagen de arriba.

Llenar

Aquí hemos establecido un ancho y altura de la imagen y la propiedad de ajuste de objeto se ha proporcionado el valor de relleno que hará que la imagen se ajuste a su contenedor exprimiendo o estirando.

img
Ancho: 200px;
Altura: 300px;
Objeto-ajuste: relleno;

Producción

La imagen ha sido exprimida para llenar su contenedor.

Cubrir

El valor de portada de la propiedad de ajuste de objeto cortará los lados de las imágenes y lo colocará dentro del contenedor manteniendo su relación de aspecto.

img
Ancho: 200px;
Altura: 300px;
Fit de objeto: cubierta;

Producción

El parámetro de la cubierta funciona correctamente.

Contener

Además de dar un poco de ancho y altura a la imagen, hemos establecido la propiedad de ajuste de objeto para contener, que recortará la imagen en el contenedor mientras preserva su relación de aspecto.

img
Ancho: 200px;
Altura: 300px;
Objeto-ajuste: contener;
borde: 5px azul sólido;

Producción

La imagen ha sido recortada con éxito.

Escala hacia abajo

El parámetro de escala de la propiedad de ajuste de objeto hereda las propiedades del parámetro de cubierta o el parámetro contener.

img
Ancho: 200px;
Altura: 300px;
Objeto-ajuste: escala-abajo;
borde: 5px azul sólido;

Producción

El valor de escalada funciona correctamente.

Propiedad de posposición de objetos

Para especificar cómo se debe colocar un elemento (particularmente una imagen o un video) a lo largo de la dimensión horizontal o vertical dentro de su contenedor, se utiliza la propiedad de posposición de objeto. Esta propiedad siempre se usa junto con la propiedad de ajuste de objeto.

Sintaxis

Posición de objetos: posición | inicial | heredar;

El parámetro de posición describe la posición de la imagen o el video a lo largo de los ejes X e Y. Puede ser una cadena como izquierda, derecha, centro o un número en píxeles o porcentaje.

Para una mejor comprensión, aquí hay un ejemplo de la propiedad de la posición de objeto. Consideramos la imagen utilizada en los ejemplos anteriores. Con el fin de definir su posición junto con cómo se cambiará el tamaño de su contenedor, use el siguiente fragmento de código.

CSS

img
Ancho: 200px;
Altura: 300px;
Objeto-ajuste: contener;
Posición de objeto: 1% 90%;
borde: 5px azul sólido;

En el código anterior, estamos configurando la propiedad de ajuste de objeto para contener, lo que significa que la imagen se recortará dentro del contenedor mientras mantenemos su relación de aspecto. Mientras tanto, las posiciones superior e izquierda de la imagen se han asignado 1%, mientras que las posiciones inferiores y derechas se han asignado 90%. Por último, el borde del contenedor ha recibido 5px con un color azul sólido.

Producción

La propiedad de la posición de objeto se ha implementado con éxito.

Conclusión

CSS proporciona propiedades de ajuste de objetos y posposición de objetos que ayudan a establecer las dimensiones de las imágenes. La propiedad de ajuste de objeto describe cómo un video o una imagen se cambiará el tamaño para ajustar su contenedor, mientras tanto, la propiedad de posposición de objetos define cómo un elemento (particularmente una imagen o un video) debe colocarse a lo largo de la dimensión horizontal o vertical dentro Su contenedor. Ambas propiedades junto con varios valores que pueden hacer se han demostrado en esta publicación a través de ejemplos.