CSS La propiedad de ajuste de objeto
La propiedad CSS object-fitse usa para especificar cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor.
La propiedad de ajuste de objeto CSS
La propiedad CSS object-fitse usa para especificar cómo se debe cambiar el tamaño de un <img> o <video> para que se ajuste a su contenedor.
Esta propiedad le dice al contenido que llene el contenedor de varias maneras; como "preservar esa relación de aspecto" o "estirar y ocupar tanto espacio como sea posible".
Mira la siguiente imagen de París. Esta imagen tiene 400 píxeles de ancho y 300 píxeles de alto:
Sin embargo, si diseñamos la imagen de arriba para que tenga la mitad de su ancho (200 píxeles) y la misma altura (300 píxeles), se verá así:
Ejemplo
img {
width: 200px;
height:
300px;
}
Vemos que la imagen se aplasta para ajustarse al contenedor de 200x300 píxeles (su relación de aspecto original se destruye).
Aquí es donde object-fitentra la propiedad. La object-fitpropiedad puede tomar uno de los siguientes valores:
fill- Esto es predeterminado. La imagen se redimensiona para llenar la dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepacontain- La imagen mantiene su relación de aspecto, pero se redimensiona para ajustarse a la dimensión dadacover- La imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para que quepanone- La imagen no cambia de tamañoscale-down- la imagen se reduce a la versión más pequeña denoneocontain
Uso de ajuste de objeto: cubierta;
Si usamos object-fit: cover;la imagen mantiene su relación de aspecto y llena la dimensión dada. La imagen se recortará para que quepa:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Usando ajuste de objeto: contener;
Si usamos object-fit: contain;la imagen mantiene su relación de aspecto, pero se redimensiona para ajustarse a la dimensión dada:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Uso de ajuste de objeto: relleno;
Si usamos object-fit: fill;la imagen se redimensiona para llenar la dimensión dada. Si es necesario, la imagen se estirará o aplastará para que quepa:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Uso de ajuste de objeto: ninguno;
Si usamos object-fit: none;la imagen no se redimensiona:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: none;
}
Uso de ajuste de objetos: reducción de escala;
Si usamos object-fit: scale-down;la imagen se reduce a la versión más pequeña de noneo
contain:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Otro ejemplo
Aquí tenemos dos imágenes y queremos que ocupen el 50% del ancho de la ventana del navegador y el 100% del alto.
En el siguiente ejemplo, NO usamos object-fit, por lo que cuando cambiamos el tamaño de la ventana del navegador, la relación de aspecto de las imágenes se destruirá:
Ejemplo
En el siguiente ejemplo, usamos object-fit: cover;, por lo que cuando cambiamos el tamaño de la ventana del navegador, se conserva la relación de aspecto de las imágenes:
Ejemplo
CSS object-fit Más ejemplos
El siguiente ejemplo demuestra todos los valores posibles de la object-fitpropiedad en un ejemplo:
Ejemplo
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Objeto CSS-* Propiedades
La siguiente tabla enumera las propiedades del objeto CSS-*:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |